如何查看谷歌地图是否已满?

小开

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

参考GMap2.tilesloaded。

小开

如果你使用的是Maps API v3，这就改变了。

在版本3中，你需要为bounds_changed事件设置一个监听器，该事件将在映射加载时触发。一旦触发，删除监听器，因为你不希望每次视口边界改变时都被通知。

随着V3 API的发展，这可能会在未来发生变化:-)

小开

你可以每隔n毫秒检查GMap2.isLoaded()方法，看看地图和它的所有贴图是否已经加载(window.setTimeout()或window.setInterval()是你的朋友)。

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

小开

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

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

小开

这让我在GMaps v3中困扰了一段时间。

我找到了一个这样做的方法:

google.maps.event.addListenerOnce(map, 'idle', function(){
// do something only the first time the map is loaded
});

当映射进入空闲状态时触发“idle”事件——所有内容都加载了(或加载失败)。我发现它比tilesloaded/bounds_changed更可靠，并使用addListenerOnce方法在闭包中的代码在第一次“idle”被触发时执行，然后事件被分离。

另见谷歌映射参考中的活动部分。

小开

我正在创建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
});
});

小开

如果你正在使用web组件，那么他们有这样一个例子:

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

小开

2018年:

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

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

小开

在我的例子中，在渲染图像之前触发了从远程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
});

小开

对于谷歌Maps V3，检查谷歌Maps何时完全加载。

诀窍是把这里所有提交的内容结合起来

首先，你必须创建一个映射的例子:

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

最后，一旦它完成加载该位置的tiles，您就可以通过“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”;，虽然我得到一个快速的光点，然后跳转到正确的地图视图，它总是工作…所以我选择了两害相权取其轻

小开

现在你知道地图准备好了没有:

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

小开

我需要它来计算地图边界，所以这对我来说已经足够了:

new ResizeObserver(()=> updateMapBounds()).observe(map.getDiv())
new IntersectionObserver(()=> updateMapBounds()).observe(map.getDiv())
updateMapBounds();