shi*_*ape 13 javascript google-maps google-maps-api-3 google-maps-markers dom-events
我在我正在开发的网站上使用Google Maps API v3.我的地图下方有一个下拉框,允许用户在地图上显示的不同标记集之间切换.使用marker.setMap()显示每个标记.
我的问题是地图有时需要很长时间来显示新标记,尤其是在IE中.我想在地图切换标记时显示"正在加载"动画.但我不知道如何检测地图何时完成显示新数据(没有页面加载,因为这是所有AJAX).是否有setMap()事件的回调或事件监听器,所以我可以调用一个函数来在最后一个标记完成加载时停止"加载"动画?
shi*_*ape 21
似乎没有setMap()的回调或事件监听器,但我想出了一种方法来实现我想要的.我正在使用jQuery加载Google Map.这是我的代码.
初始化地图时,我为'idle'事件设置了一个监听器,它隐藏了"加载"动画.滚动或缩放更改后,只要地图完成重绘,就会触发'idle'事件:
google.maps.event.addListener(this.map, 'idle', function() {
$('#loading').hide();
});
Run Code Online (Sandbox Code Playgroud)
在我清除叠加层的功能中,我首先显示加载动画,然后使用setMap(null)清除每个标记.然后我通过改变经度.000000001轻微地重新定位地图.这在所有setMap()调用之后发生,并触发隐藏加载动画的'idle'事件.
// clear overlays from the map
function clearOverlays() {
$('#loading').show();
// clear the markers from the active data array
if (activeData) {
for (i in activeData) { activeData[i].setMap(null); }
}
activeData = '';
// very slightly recenter the map to trigger the 'idle' event
var centerlat = MYMAP.map.getCenter().lat();
var centerlng = MYMAP.map.getCenter().lng() + .000000001;
recenter = new google.maps.LatLng(centerlat, centerlng);
MYMAP.map.setCenter(recenter);
}
Run Code Online (Sandbox Code Playgroud)
这有点像黑客,但我希望别人觉得这很有用.
| 归档时间: |
|
| 查看次数: |
19370 次 |
| 最近记录: |