我正在将Google地图嵌入我的网站中。一旦Google地图加载完成,我需要启动一些JavaScript进程。
有没有一种方法可以自动检测Google地图何时完全加载,包括瓦片下载和所有内容?
存在一个tilesloaded()
方法,旨在实现此任务,但是它不起作用。
我正在将Google地图嵌入我的网站中。一旦Google地图加载完成,我需要启动一些JavaScript进程。
有没有一种方法可以自动检测Google地图何时完全加载,包括瓦片下载和所有内容?
存在一个tilesloaded()
方法,旨在实现此任务,但是它不起作用。
使用GMaps v3时,这一直困扰着我。
我找到了一个这样的解决方法:
google.maps.event.addListenerOnce(map, 'idle', function(){
// do something only the first time the map is loaded
});
当地图进入空闲状态(所有内容加载完毕或加载失败),会触发“idle”事件。我发现使用addListenerOnce
方法并在闭包中编写代码,比使用tilesloaded/bounds_changed更可靠,因为在第一次触发“idle”时执行闭包中的代码,然后解除事件监听。
另请参阅Google Maps参考文档中的事件部分。
我正在创建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
});
});
map
对象没有被实例化,我知道你说你在最后添加了它,但这就是错误的意思...它找不到你的 map 对象。 - Uriahs Victor2018年:
var map = new google.maps.Map(...)
map.addListener('tilesloaded', function () { ... })
https://developers.google.com/maps/documentation/javascript/events
google.maps.event.addListenerOnce(map, 'tilesloaded', function(){}
,以便只触发一次。addListenerOnce
似乎不支持 map
。 - Uriahs Victorbounds_changed
事件设置监听器,该事件将在地图加载时触发。一旦该事件被触发,请删除监听器,因为您不希望每次视口边界改变时都被通知。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");
});
针对Google Maps V3,在检查谷歌地图完全加载时使用。
诀窍是这里所有提交的组合。
首先,您必须创建地图示例:
let googleMap = new google.maps.Map(document.getElementById(targetMapId),
{
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
styles: [
{
featureType: "poi",
elementType: "labels",
stylers: [
{visibility: "off"}
]
}
],
});
然后您需要设置一个默认位置来加载它... 它可以放在任何地方
googleMap.setCenter({
lat: 26.12269,
lng: -80.130172
});
最后,一旦它完成加载该位置的瓷砖,您可以通过“tilesloaded”事件处理代码,这些代码可以包括重新定位地图、放置标记等等。
这确保了在对地图进行操作之前,地图已经被加载。
google.maps.event.addListenerOnce(googleMap, 'tilesloaded', function(){
// do something only the first time the map is loaded
});
其他人也建议使用"空闲"事件,但是对我来说,这并不是很有效,因为有时候成功,有时候失败。
google.maps.event.addListenerOnce(googleMap, 'idle', function(){
// do something only the first time the map is loaded
});
然而,当我使用“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
});
这些天你知道地图是否准备好了:
void _onMapCreated(GoogleMapController controller) {
this.controller = controller;
_mapIsReady=true; //create this variable
}
从地图小部件调用此方法
return GoogleMap(
myLocationEnabled: true,
//markers: markers,
markers: Set<Marker>.of(markers.values),
onMapCreated: _onMapCreated,
initialCameraPosition: CameraPosition(
target: _initialPosition,
zoom: 5.0,
),
);
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
。 - Christoph Lösch