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

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

地图拖动事件的触发器不在初始化函数的末尾。它在任何一个功能之外。而且你在代码末尾有一个无关的};。

我建议通过 JSLint 运行它。

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

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