javascript Google Maps API v3:setMap() 事件是否有回调或事件侦听器?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3461246/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 01:13:56  来源:igfitidea点击:

Google Maps API v3: Is there a callback or event listener for a setMap() event?

javascriptgoogle-mapsgoogle-maps-api-3google-maps-markersdom-events

提问by shipshape

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().

我正在开发的网站上使用 Google Maps API v3。我的地图下方有一个下拉框,允许用户在要显示在地图上的不同标记集之间切换。每个标记都使用 显示marker.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?

我的问题是地图有时需要很长时间才能显示新标记,尤其是在 IE 中。我想在地图切换标记时显示“加载”动画。但我不知道如何检测地图何时完成显示新数据(没有页面加载,因为这都是 AJAX)。是否有事件的回调或事件侦听器setMap(),以便在最后一个标记完成加载时调用函数来停止“加载”动画?

回答by shipshape

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.

setMap() 似乎没有回调或事件侦听器,但我想出了一种方法来完成我想要的。我正在使用 jQuery 加载 Google 地图。这是我的代码。

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:

初始化地图时,我为 'idle' 事件设置了一个监听器,它隐藏了“加载”动画。每当地图在滚动或缩放更改后完成重绘时,就会触发 'idle' 事件:

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

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.

在我清除叠加层的函数中,我首先显示加载动画,然后使用 setMap(null) 清除每个标记。然后我通过将经度更改为 0.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);
}

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

这有点黑客,但我希望其他人觉得这很有用。