使用jQuery的Google地图上的空闲事件

Question

我在自己的网站上设置了一个google地图，并且每当地图范围发生变化（通过拖动或缩放）时，我都希望重新加载标记。

我最初使用jQuery添加地图并清除标记：

$('#map_canvas').gmap();
$('#map_canvas').gmap('clear', 'markers');

然后，添加带有以下内容的标记：

$('#map_canvas').gmap('addMarker', {'position': position, 'bounds': true });

我的问题：如何“捕捉”移动地图的事件？我已经读到有一个空闲事件，并且我看到了一个例子：

google.maps.event.addListener(map, 'idle', function() {
});

但是我放置的任何东西而不是“ map”变量都不起作用...我也尝试过：

map = new google.maps.Map(document.getElementById("map_canvas"));

有人有主意吗？

非常感谢，

丹尼

Answer 1

对于其他遇到此问题的人：

您可以像这样获取地图对象/变量：

$('#map_canvas').gmap();
var map = $('#map_canvas').gmap('get', 'map');

拥有地图对象后，您可以将事件侦听器附加到它：

$(map).addEventListener('idle', function() {
    console.log('Map is now idle');
    console.log(map.getCenter());
});

HTH

Answer 2

在你定义的函数中你可以做任何你想做的事情。这称为地图边界总是变化。例如：

google.maps.event.addListener(map, 'idle', function() {
 var bounds = map.getBounds();
 var sw = bounds.getSouthWest();
 var ne = bounds.getNorthEast();
 alert("minimum lat of current map view: " + sw.lat());
});

“map”应该是您之前创建的谷歌地图。

var map = new google.maps.Map( document.getElementById('map_canvas'), myOptions );

干杯! 托马斯