[英]How can I check whether Google Maps is fully loaded?
I'm embedding Google Maps into my web site.我正在将 Google 地图嵌入到我的 web 站点中。 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?有没有办法在谷歌地图完全加载时自动检测,包括瓷砖下载和所有?
A tilesloaded()
method exists that is supposed to accomplish exactly this task but it does not work .存在一个应该完全完成此任务但它不起作用的
tilesloaded()
方法。
This was bothering me for a while with GMaps v3. GMaps v3让我困扰了一段时间。
I found a way to do it like this: 我找到了这样做的方法:
google.maps.event.addListenerOnce(map, 'idle', function(){
// do something only the first time the map is loaded
});
The "idle" event is triggered when the map goes to idle state - everything loaded (or failed to load). 当地图进入空闲状态时会触发“空闲”事件 - 所有内容都已加载(或无法加载)。 I found it to be more reliable then tilesloaded/bounds_changed and using
addListenerOnce
method the code in the closure is executed the first time "idle" is fired and then the event is detached. 我发现它比tilesload / bounds_changed更可靠,并且使用
addListenerOnce
方法,在第一次触发“idle”时执行闭包中的代码,然后分离事件。
See also the events section in the Google Maps Reference. 另请参阅Google地图参考中的事件部分 。
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
});
});
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的发展,这可能会在未来发生变化:-)
If you're using web components , then they have this as an example: 如果您正在使用Web组件 ,那么他们将此作为示例:
map.addEventListener('google-map-ready', function(e) {
alert('Map loaded!');
});
In 2018: 2018年:
var map = new google.maps.Map(...)
map.addListener('tilesloaded', function () { ... })
https://developers.google.com/maps/documentation/javascript/events https://developers.google.com/maps/documentation/javascript/events
GMap2::tilesloaded()
would be the event you're looking for. GMap2::tilesloaded()
将是您正在寻找的事件。
See GMap2.tilesloaded for references. 请参阅GMap2.tilesloaded以获取参考。
Where the variable map
is an object of type GMap2: 变量
map
是GMap2类型的对象:
GEvent.addListener(map, "tilesloaded", function() {
console.log("Map is fully loaded");
});
In my case, Tile Image loaded from remote url and tilesloaded
event was triggered before render the image. 在我的例子中,在渲染图像之前触发了从远程url和
tilesloaded
事件加载的Tile Image。
I solved with following dirty way. 我用下面的方式解决了。
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
});
For Google Maps V3, to check when google maps is fully loaded.对于谷歌地图 V3,检查谷歌地图何时完全加载。
The trick is a combination of all the submissions on here诀窍是这里所有提交的组合
First you must create the map example:首先,您必须创建地图示例:
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"}
]
}
],
});
Then you need to set a default location for it to load.. it can be anywhere然后你需要为它设置一个默认位置来加载..它可以在任何地方
googleMap.setCenter({
lat: 26.12269,
lng: -80.130172
});
Then finally once it finishes loading the tiles for that location you can process code via the "tilesloaded" eent, this code can include re-centering the map, placing markers etc..最后,一旦完成加载该位置的图块,您就可以通过“tilesloaded”对象处理代码,该代码可以包括重新居中地图、放置标记等。
This ensures that the map is loaded before you do something with it这可确保地图在您对其进行处理之前已加载
google.maps.event.addListenerOnce(googleMap, 'tilesloaded', function(){
// do something only the first time the map is loaded
});
Others have suggested the "idle" event as well, but I did not have much luck with that as it was hit or miss for me.其他人也提出了“空闲”事件,但我没有太多运气,因为它对我来说是命中注定的。
google.maps.event.addListenerOnce(googleMap, 'idle', function(){
// do something only the first time the map is loaded
});
Whereas when I used the "tilesloaded" , while I do get a quick blip then jump to the correct map view, it always works...so I went with the lesser of two evils而当我使用 "tilesloaded" 时,虽然我确实得到了一个快速的 blip 然后跳转到正确的地图视图,但它总是有效......所以我选择了两害相权取其轻的方法
This days you know if the map is ready here:这几天你知道地图是否准备好了:
void _onMapCreated(GoogleMapController controller) {
this.controller = controller;
_mapIsReady=true; //create this variable
}
call this method from the map widget从地图小部件调用此方法
return GoogleMap(
myLocationEnabled: true,
//markers: markers,
markers: Set<Marker>.of(markers.values),
onMapCreated: _onMapCreated,
initialCameraPosition: CameraPosition(
target: _initialPosition,
zoom: 5.0,
),
);
I needed it for the calculating the map bounds, so this was enough for me:我需要它来计算 map 边界,所以这对我来说已经足够了:
new ResizeObserver(()=> updateMapBounds).observe(map.getDiv())
new IntersectionObserver(()=> updateMapBounds).observe(map.getDiv())
updateMapBounds();
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。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.