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

迈不过友情╰ 2022-11-27 12:08 210阅读 0赞

本文翻译自：[How can I check whether Google Maps is fully loaded?][How can I check whether Google Maps is fully loaded]

*I'm embedding Google Maps into my web site.* **我正在将Google地图嵌入我的网站。** *Once Google Maps is loaded, I need to kick off a few JavaScript processes.* **加载Google地图后，我需要启动一些JavaScript流程。**

***Is there a way to auto-detect when Google Maps has fully loaded, including tile downloads and all?*** **有没有办法在Google地图完全加载时自动检测，包括平铺下载等等？**

*A `tilesloaded()` method exists that is supposed to accomplish exactly this task but [it does not work][] .* **存在一个`tilesloaded()`方法，该方法应该完成此任务，但[它不起作用][it does not work] 。**

--------------------

### \#1楼 ###

参考：[https://stackoom.com/question/3uCw/如何检查Google地图是否已满载][https_stackoom.com_question_3uCw_Google]

--------------------

### \#2楼 ###

*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.* **在版本3中，您基本上想要为`bounds_changed`事件设置一个侦听器，该事件将在映射加载时触发。** *Once that has triggered, remove the listener as you don't want to be informed every time the viewport bounds change.* **触发后，删除侦听器，因为每次视口边界更改时都不希望被通知。**

*This may change in the future as the V3 API is evolving :-)* **随着V3 API的发展，这可能会在未来发生变化:-)**

--------------------

### \#3楼 ###

*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移动应用程序，我注意到在创建和呈现地图对象时（即使它不可见），会`tilesloaded` `idle` ， `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
        });
    });

--------------------

### \#4楼 ###

*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。**

--------------------

### \#5楼 ###

*Where the variable `map` is an object of type GMap2:* **变量`map`是GMap2类型的对象：**

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

--------------------

### \#6楼 ###

*If you're using [web components][] , then they have this as an example:* **如果您正在使用[Web组件][web components] ，那么他们将此作为示例：**

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

[How can I check whether Google Maps is fully loaded]: https://oldbug.net/q/3uCw/How-can-I-check-whether-Google-Maps-is-fully-loaded
[it does not work]: https://www.google.com/search?hl=en&q=GEvent.addListener%28map,+%22tilesloaded%22,+function%28%29+%7B&btnG=Google+Search&aq=f&oq=
[https_stackoom.com_question_3uCw_Google]: https://stackoom.com/question/3uCw/%E5%A6%82%E4%BD%95%E6%A3%80%E6%9F%A5Google%E5%9C%B0%E5%9B%BE%E6%98%AF%E5%90%A6%E5%B7%B2%E6%BB%A1%E8%BD%BD
[web components]: http://googlewebcomponents.github.io/google-map/components/google-map/