我把谷歌地图嵌入到我的网站。一旦谷歌地图被加载,我需要启动一些JavaScript进程。
有没有办法自动检测当谷歌地图已完全加载,包括瓷砖下载和所有?
存在一个tilesloaded()方法,该方法应该完全完成这个任务,但它不起作用。
我把谷歌地图嵌入到我的网站。一旦谷歌地图被加载,我需要启动一些JavaScript进程。
有没有办法自动检测当谷歌地图已完全加载,包括瓷砖下载和所有?
存在一个tilesloaded()方法,该方法应该完全完成这个任务,但它不起作用。
当前回答
在我的情况下,瓷砖图像加载从远程url和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
});
其他回答
其中变量map是类型为GMap2的对象:
GEvent.addListener(map, "tilesloaded", function() {
console.log("Map is fully loaded");
});
您可以每隔n毫秒检查GMap2.isLoaded()方法,以查看映射及其所有磁贴是否已加载(window.setTimeout()或window.setInterval()是您的朋友)。
虽然这不会为您提供加载完成的确切事件,但它应该足以触发Javascript。
2018年:
var map = new google.maps.Map(...)
map.addListener('tilesloaded', function () { ... })
https://developers.google.com/maps/documentation/javascript/events
这让我在GMaps v3中困扰了一段时间。
我找到了一个这样做的方法:
google.maps.event.addListenerOnce(map, 'idle', function(){
// do something only the first time the map is loaded
});
当映射进入空闲状态时触发“idle”事件——所有内容都加载了(或加载失败)。我发现它比tilesloaded/bounds_changed和使用addListenerOnce方法更可靠,闭包中的代码在第一次“空闲”被触发时执行,然后事件被分离。
另请参阅谷歌地图参考中的事件部分。
在我的情况下,瓷砖图像加载从远程url和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
});