Question

我正在将Google地图嵌入我的网站。加载Google地图后，我需要启动一些JavaScript流程。

有没有办法在Google地图完全加载时自动检测，包括平铺下载等等？

存在tilesloaded()方法应该完成此任务，但it does not work。

Answer 1

这让我困扰了GMaps v3。

我找到了这样做的方法：

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

当地图进入空闲状态时会触发“空闲”事件 - 所有内容都已加载（或无法加载）。我发现它比tilesload / bounds_changed更可靠，并且使用addListenerOnce方法，闭包中的代码在第一次触发“idle”时执行，然后事件被分离。

另请参阅Google地图参考中的events section。

Answer 2

我正在创建html5移动应用，我注意到idle，bounds_changed和tilesloaded事件在创建和呈现地图对象时触发（即使它不可见）

为了让我的地图在第一次显示时运行代码，我执行了以下操作：

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

Answer 3

如果您使用的是Maps API v3，则会发生变化。

在版本3中，您基本上想要为bounds_changed事件设置一个侦听器，该事件将在地图加载时触发。触发后，删除侦听器，因为每次视口边界发生更改时都不希望被通知。

随着V3 API的发展，这可能会在未来发生变化： - ）

Answer 4

如果您使用的是web components，那么他们会将此作为示例：

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

Answer 5

2018年：

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

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

Answer 6

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

请参阅GMap2.tilesloaded以获取参考资料。

Answer 7

变量map是GMap2类型的对象：

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

Answer 8

在我的情况下，在渲染图像之前触发了从远程URL加载的Tile Image和tilesloaded事件。

我用以下肮脏的方式解决了。

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

Answer 9

您可以每隔GMap2.isLoaded()毫秒查看n方法，看看地图及其所有图块是否已加载（window.setTimeout()或window.setInterval()是您的朋友）。

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

如何检查Google地图是否已满载？

9 个答案: