我把谷歌地图嵌入到我的网站。一旦谷歌地图被加载,我需要启动一些JavaScript进程。

有没有办法自动检测当谷歌地图已完全加载,包括瓷砖下载和所有?

存在一个tilesloaded()方法,该方法应该完全完成这个任务,但它不起作用。


当前回答

对于谷歌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
      });

最后,一旦它完成加载该位置的瓷砖,你可以通过“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”时,虽然我确实得到了一个快速的光点,然后跳转到正确的地图视图,但它总是有效的……所以我选择了两害相权取其轻

其他回答

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

看到GMap2。加载tile供参考。

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

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

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

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

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

对于谷歌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
      });

最后,一旦它完成加载该位置的瓷砖,你可以通过“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,
              ),
            );