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);
        // });
    });
})

zoom_changed在页面加载时反复触发

2 个答案: