Question

我有一个谷歌地图，可以在dragend和zoom_changed事件后更新其上的所有标记。除了地图的初始加载外，它都可以正常工作。地图加载后，它是空的。在initialize()结束时，我致电google.maps.event.trigger(map, 'dragend')尝试调用dealWithNewWindow函数，以便地图填充标记，但没有任何反应？

initialize = function() {
  mapOptions = {
    center: { lat: 51, lng: 0 },
    zoom: 9
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  map.setCenter(new google.maps.LatLng(51,0));
  google.maps.event.addListener(map, 'zoom_changed', dealWithNewWindow);
  google.maps.event.addListener(map, 'dragend', dealWithNewWindow);
  function dealWithNewWindow(event) {
    killAllMarkers();
    var bounds = map.getBounds();
    var nelat = bounds.getNorthEast().lat();
    var swlat = bounds.getSouthWest().lat();
    var nelng = bounds.getNorthEast().lng();
    var swlng = bounds.getSouthWest().lng();
    var mapBounds = {NElatitude:nelat, SWlatitude:swlat, NElongitude:nelng, SWlongitude:swlng};
    $.ajax({
      type     : 'POST',
      url      : '/maprequest',
      dataType : 'script',
      data     :  {  NElatitude:nelat, SWlatitude:swlat, NElongitude:nelng, SWlongitude:swlng }
    });
  };
  google.maps.event.trigger(map, 'dragend');
};

google.maps.event.addDomListener(window, 'load', initialize);

编辑：

我已经回答了这个问题。页面刷新后，javascript会在dealWithNewWindow：var nelat = bounds.getNorthEast().lat();中的这一行中停止。由于某些原因，此代码在之后更改地图边界时运行正常，但在第一次加载地图时失败。

Answer 1

地图dragend事件的触发器不在初始化函数的末尾。它不属于任何一个功能。并且在代码末尾有一个无关的};。

我建议通过JSLint运行它。

这是原始版本，修改了缩进并添加了一些注释，使函数的开始和结束更加明显：

initialize = function() {
    mapOptions = {
        center: {
            lat: 51,
            lng: 0
        },
        zoom: 9
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    map.setCenter(new google.maps.LatLng(51, 0));
} // end of initialize function

// not in any function:
google.maps.event.addListener(map, 'zoom_changed', dealWithNewWindow);
google.maps.event.addListener(map, 'dragend', dealWithNewWindow);

function dealWithNewWindow(event) {
    killAllMarkers();
    var bounds = map.getBounds();
    var nelat = bounds.getNorthEast().lat();
    var swlat = bounds.getSouthWest().lat();
    var nelng = bounds.getNorthEast().lng();
    var swlng = bounds.getSouthWest().lng();
    var mapBounds = {
        NElatitude: nelat,
        SWlatitude: swlat,
        NElongitude: nelng,
        SWlongitude: swlng
    };
    $.ajax({
        type: 'POST',
        url: '/maprequest',
        dataType: 'script',
        data: {
            NElatitude: nelat,
            SWlatitude: swlat,
            NElongitude: nelng,
            SWlongitude: swlng
        }
    });
}; // end of dealWithNewWindow function

// not in any function:
google.maps.event.trigger(map, 'dragend');

};  // erroneous closing };

google.maps.event.addDomListener(window, 'load', initialize);

这是一个经过小修改的版本，我认为应该可以解决您的错误。

initialize = function() {
    mapOptions = {
        center: {
            lat: 51,
            lng: 0
        },
        zoom: 9
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    map.setCenter(new google.maps.LatLng(51, 0));

    google.maps.event.addListener(map, 'zoom_changed', dealWithNewWindow);
    google.maps.event.addListener(map, 'dragend', dealWithNewWindow);

    google.maps.event.trigger(map, 'dragend');
};

function dealWithNewWindow(event) {
    killAllMarkers();
    var bounds = map.getBounds();
    var nelat = bounds.getNorthEast().lat();
    var swlat = bounds.getSouthWest().lat();
    var nelng = bounds.getNorthEast().lng();
    var swlng = bounds.getSouthWest().lng();
    var mapBounds = {
        NElatitude: nelat,
        SWlatitude: swlat,
        NElongitude: nelng,
        SWlongitude: swlng
    };
    $.ajax({
        type: 'POST',
        url: '/maprequest',
        dataType: 'script',
        data: {
            NElatitude: nelat,
            SWlatitude: swlat,
            NElongitude: nelng,
            SWlongitude: swlng
        }
    });
};

google.maps.event.addDomListener(window, 'load', initialize);

Answer 2

好的，直到瓷砖加载后才能定义getBounds（）。 Salman A的回答here解决了这个问题：

google.maps.event.addListenerOnce(map, 'idle', function() {
  google.maps.event.trigger(map, 'dragend');
});

地图加载后google.maps.event.trigger不会触发

2 个答案: