zoom_changed页面加载时反复触发

Question

使用 Google Maps API，我的initMap()函数中有两个侦听器：

google.maps.event.addListener(map, 'dragend', function(e) {
var searchType=location.search.split('=').pop();                
MAPSEARCH.MY.searchOnLoc(false, searchType);
});
google.maps.event.addListener(map, 'zoom_changed', function(e) {
var searchType=location.search.split('=').pop();
MAPSEARCH.MY.searchOnLoc(false, searchType);
});

第一个工作正常，但第二个(zoom_changed(在页面加载时触发多次，导致各种混乱。我该如何防止这种情况？

出于测试目的，我尝试更改为bounds_changed但它也会在页面加载时触发额外的时间。

Answer 1

一定是有其他原因导致了你所描述的。仅加载地图不会触发缩放更改，如以下示例所示。

function initialize() {
var myLatLng = new google.maps.LatLng(46.2,6.17);
var mapOptions = {
zoom: 4,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map
});
google.maps.event.addListener(map, 'zoom_changed', function() {
alert('Zoom Changed');
});
}
initialize();

#map-canvas {
height: 150px;
}

<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>

Answer 2

我找到了一种方法来防止zoom_changed侦听器加载，直到地图完成加载：

google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
google.maps.event.addListener(map, 'zoom_changed', function (e) {
// var eventListener = google.maps.event.addListener(this.map, "bounds_changed", function () {
var searchType = location.search.split('=').pop();
MAPSEARCH.MY.searchOnLoc(false, searchType);
// });
});
})