如何检查谷歌映射是否已完全加载?

I’m embedding Google Maps into my web site. Once Google Maps is loaded, I need to kick off a few JavaScript processes.

我将谷歌地图嵌入我的网站。加载谷歌映射之后，我需要启动一些JavaScript进程。

Is there a way to auto-detect when Google Maps has fully loaded, including tile downloads and all?

是否有一种方法可以自动检测谷歌地图何时已完全加载，包括平铺下载等?

A tilesloaded() method exists that is supposed to accomplish exactly this task but it does not work.

存在一个tilesloaded()方法，它应该完全完成这个任务，但它不起作用。

9 个解决方案

#1

539

This was bothering me for a while with GMaps v3.

这在GMaps v3中困扰了我一段时间。

I found a way to do it like this:

我找到了这样的方法:

google.maps.event.addListenerOnce(map, 'idle', function(){
    // do something only the first time the map is loaded
});

The "idle" event is triggered when the map goes to idle state - everything loaded (or failed to load). I found it to be more reliable then tilesloaded/bounds_changed and using addListenerOnce method the code in the closure is executed the first time "idle" is fired and then the event is detached.

当映射进入空闲状态时，将触发“空闲”事件——加载(或加载失败)的所有内容。我发现它比tilesloaded/bounds_changed和使用addListenerOnce方法更可靠，在第一次触发“idle”时执行闭包中的代码，然后分离事件。

See also the events section in the Google Maps Reference.

参见谷歌映射引用中的events部分。

#2

I'm creating html5 mobile apps and I noticed that the idle, bounds_changed and tilesloaded events fire when the map object is created and rendered (even if it is not visible).

我正在创建html5移动应用程序，我注意到当创建并呈现map对象(即使它不可见)时，空闲、bounds_changed和tilesloaded事件会触发。

To make my map run code when it is shown for the first time I did the following:

为了使我的地图运行代码，当它第一次显示时，我做了以下工作:

google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
    //this part runs when the mapobject is created and rendered
    google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
        //this part runs when the mapobject shown for the first time
    });
});

#3

If you're using the Maps API v3, this has changed.

如果您使用的是Maps API v3，那么它已经改变了。

In version 3, you essentially want to set up a listener for the bounds_changed event, which will trigger upon map load. Once that has triggered, remove the listener as you don't want to be informed every time the viewport bounds change.

在版本3中，您实际上希望为bounds_changed事件设置侦听器，该事件将在映射加载时触发。一旦触发，删除侦听器，因为您不想在每次viewport边界改变时被通知。

This may change in the future as the V3 API is evolving :-)

随着V3 API的发展，这种情况可能会在将来发生变化:-)

#4

If you're using web components, then they have this as an example:

如果你使用的是web组件，那么他们有一个例子:

map.addEventListener('google-map-ready', function(e) {
   alert('Map loaded!');
});

#5

GMap2::tilesloaded() would be the event you're looking for.

GMap2::tilesloaded()将是您正在寻找的事件。

See GMap2.tilesloaded for references.

看到GMap2。tilesloaded引用。

#6

Where the variable map is an object of type GMap2:

其中变量映射为GMap2类型的对象:

    GEvent.addListener(map, "tilesloaded", function() {
      console.log("Map is fully loaded");
    });

#7

In 2018:

2018年:

var map = new google.maps.Map(...)
map.addListener('tilesloaded', function () { ... })

https://developers.google.com/maps/documentation/javascript/events

#8

In my case, Tile Image loaded from remote url and tilesloaded event was triggered before render the image.

在我的例子中，从远程url和tilesloaded事件加载的平铺图像在呈现图像之前被触发。

I solved with following dirty way.

我用下流的方式解决了。

var tileCount = 0;
var options = {
    getTileUrl: function(coord, zoom) {
        tileCount++;
        return "http://posnic.com/tiles/?param"+coord;
    },
    tileSize: new google.maps.Size(256, 256),
    opacity: 0.5,
    isPng: true
};
var MT = new google.maps.ImageMapType(options);
map.overlayMapTypes.setAt(0, MT);
google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
    var checkExist = setInterval(function() {
        if ($('#map_canvas > div > div > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div > div').length === tileCount) {
            callyourmethod();
            clearInterval(checkExist);
        }
    }, 100); // check every 100ms
});

#9

-3

You could check the GMap2.isLoaded() method every n milliseconds to see if the map and all its tiles were loaded (window.setTimeout() or window.setInterval() are your friends).

您可以每n毫秒检查GMap2.isLoaded()方法，看看映射和它的所有块是否都被加载了(window.setTimeout()或window.setInterval()是您的朋友)。

While this won't give you the exact event of the load completion, it should be good enough to trigger your Javascript.

虽然这不会为您提供负载完成的确切事件，但它应该足以触发您的Javascript。

#1

539