如何检查Google Maps是否已满载？

293

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

有没有一种方法可以自动检测Google Maps何时完全加载，包括磁贴下载和全部加载？

tilesloaded()存在一种方法可以完全完成该任务，但不起作用。

javascript html google-maps

— TRiG
source

2

“ tilesloaded”事件似乎对我有用。当页面加载以及我四处移动地图时触发。在您的地图上，它只是不一致，还是永远不起作用？

— 克里斯B，2009年

不就是不。每次加载新的图块时都会触发“ tilesloaded”，这意味着它不仅会在首次加载时触发，而且还会在您每次将地图拖到尚未加载图块的位置时触发。

— Aivus

取决于您使用的是addListener（）还是addListenerOnce（）。您对addListener（）的google.maps.event.addListenerOnce(map, 'tilesloaded', function() {

— 看法

608

使用GMaps v3困扰了我一段时间。

我找到了这样的方法：

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

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

另请参阅Google地图参考中的事件部分。

— 季琴耶夫
source

15

地图进入空闲状态时会触发（不会加载更多内容）。有时可能由于连接不良而导致某些图块未加载，因此即使缺少此类图块，最终也会触发空闲事件。如果您需要确保地图完整，没有丢失的瓷砖等，则应寻求其他方法（例如“ tilesloaded”事件）。

— ddinchev 2012年

15

它对我不起作用..在我的地图上没有任何显示之前触发

— zsitro

16

-1：触发器加载/显示图块之前。

— zbr 2013年

11

-1：对我来说，在chrome和firefox中，脚本加载后始终在任何瓦片显示之前始终触发。也许在快速连接上并不明显，但我很幸运，连接很慢。不过，“平铺”似乎有效。

— Xananax 2014年

1

感谢您提供的解决方案-我认为这正是我所需要的。我根本无法绕开我的头，这就是为什么Google在地球上还没有放入简单的现成钩子？：-O

— hasse

55

我创建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
    });
});

— 皮里·柳卡斯（Pyry Liukas）
source

4

第一个tileloaded函数对我来说效果很好，但是第二个tileloaded函数对我来说永远不会运行。

— 鹅

我正在Uncaught ReferenceError: map is not defined。我尝试延迟运行脚本并在其他脚本结束时运行，但似乎无济于事。

— Sam Willis

1

如果要在事件处理程序中定义事件处理程序，那么您将会遇到麻烦。我强烈建议您不要这样做，这是一个稍微有点怪异的

— Cory Mawhorter

15

如果您使用的是Maps API v3，则此操作已更改。

在版本3中，您实质上想为bounds_changed事件设置一个侦听器，该事件将在加载地图时触发。一旦触发，请删除侦听器，因为您不想在每次视口边界更改时都被告知。

随着V3 API的发展，这种情况将来可能会改变：-)

— timbo
source

2

我发现这对我来说并不像寻找tilesloaded活动那样可靠。

— TMC 2012年

12

在2018年：

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

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

— 哈夫拉
source

tileloaded是唯一可以正确等待KML图层全部渲染完毕的解决方案

— smirkingman

9

如果您使用的是Web组件，则以它们为例：

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

— 菲利普·森
source

3

糟糕的评论，它在许多级别上的错误都不知道从哪里开始。

— 夜

1

为什么说“糟糕的评论，在许多我不知道从哪里开始的水平上都是错误的”？

— 菲利普·森

3

但是，为什么要提供一个使用不同于Google Maps的框架的解决方案呢？

— 夜

因为也许更好？

— 菲利普·森

HAHAHAHA @nights

— Juan

5

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

有关参考，请参见GMap2.tilesloaded。

— 亚当·马克维兹（Adam Markowitz）
source

我已经阅读了很多关于tileloaded（）事件的信息，似乎它在触发时极其不一致。还有其他选择吗？

3

其中变量map是GMap2类型的对象：

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

— 奉献者
source

0

就我而言，tilesloaded在渲染图像之前触发了从远程url和event 加载的Tile Image 。

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

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

— 巴拉
source

-4

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

尽管这不会给您确切的加载完成事件，但足以触发Javascript。

— fbuchinger
source