Google Maps API v3：是否有setMap（）事件的回调或事件侦听器？ [英] Google Maps API v3: Is there a callback or event listener for a setMap() event?

问题描述

我在正在开发的网站上使用Google Maps API v3。我在地图下方有一个下拉框，允许用户在地图上显示不同套标记之间切换。每个标记都使用marker.setMap（）显示。

I am using Google Maps API v3 on a website I am developing. I have a drop-down box beneath my map which allows the user to switch between different sets of markers to be displayed on the map. Each marker is displayed using marker.setMap().

我的问题是地图有时需要很长时间来显示新的标记，特别是在IE中。我想在地图切换标记时显示加载动画。但我不知道如何检测地图何时完成显示新数据（没有页面加载，因为这是所有的AJAX）。是否有setMap（）事件的回调或事件侦听器，所以我可以调用一个函数来停止最后一个标记加载完成时的加载动画？

My problem is that the map sometimes takes a long time to display the new markers, especially in IE. I want to show a "Loading" animation while the map is switching markers. But I don't know how to detect when the map has finished displaying the new data (there is no page load, since this is all AJAX). Is there a callback or event listener for a setMap() event, so I can call a function to stop the "Loading" animation when the last marker has finished loading?

推荐答案

似乎没有setMap（）的回调或事件监听器，但我想出了一种方法来实现我想要的。我使用jQuery加载Google Map。这是我的代码。

There doesn't seem to be a callback or event listener for setMap(), but I figured out a way to accomplish what I wanted. I am loading the Google Map using jQuery. Here is my code.

初始化地图时，我为'空闲'事件设置了一个侦听器，隐藏了加载动画。每当地图在滚动或缩放更改后重新绘制时，都会触发空闲事件：

When initializing the map, I set up a listener for the 'idle' event, which hides the "loading" animation. The 'idle' event is triggered whenever the map is finished redrawing after a scroll or zoom change:

google.maps.event.addListener(this.map, 'idle', function() {
 $('#loading').hide();
});

在我的清除叠加的函数中，首先显示加载动画，然后使用setMap清除每个标记（空值）。然后，我通过以.000000001改变经度而非常轻微地重新定位地图。这发生在所有setMap（）调用之后，并触发隐藏加载动画的'idle'事件。

And in my function to clear overlays, I first show the loading animation, then clear each marker using setMap(null). Then I very slightly recenter the map by changing the longitude by .000000001. This happens after all the setMap() calls, and triggers the 'idle' event which hides the loading animation.

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

这有点破解，但我希望别人认为这个有用。

It is a bit of a hack, but I hope someone else finds this useful.

这篇关于Google Maps API v3：是否有setMap（）事件的回调或事件侦听器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！