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

2020/10/05 00:01 · javascript ·  · 0评论

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

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

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

使用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地图参考中事件部分

我创建HTML5的移动应用和我注意到idlebounds_changedtilesloaded事件触发创建和渲染(即使它是不可见的)地图对象时。

为了使地图运行代码首次显示时,我执行了以下操作:

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

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

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

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

在2018年:

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

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

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

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

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

有关参考,请参见GMap2.tilesloaded

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

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

就我而言,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
});

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

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

本文地址:http://javascript.askforanswer.com/ruhejianchagoogle-mapsshifouyimanzai.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!