如何檢查谷歌地圖是否已滿載？

Question

我正在將 Google 地圖嵌入到我的 web 站點中。 加載 Google 地圖后，我需要啟動一些 JavaScript 進程。

有沒有辦法在谷歌地圖完全加載時自動檢測，包括瓷磚下載和所有？

存在一個應該完全完成此任務但它不起作用的tilesloaded()方法。

Answer 1

GMaps v3讓我困擾了一段時間。

我找到了這樣做的方法：

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

當地圖進入空閑狀態時會觸發“空閑”事件 - 所有內容都已加載（或無法加載）。 我發現它比tilesload / bounds_changed更可靠，並且使用addListenerOnce方法，在第一次觸發“idle”時執行閉包中的代碼，然后分離事件。

另請參閱Google地圖參考中的事件部分 。

Answer 2

我正在創建html5移動應用程序，我注意到在創建和呈現地圖對象時（即使它不可見），會tilesloaded 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
    });
});

Answer 3

如果您使用的是Maps API v3，則會發生變化。

在版本3中，您基本上想要為bounds_changed事件設置一個偵聽器，該事件將在映射加載時觸發。 觸發后，刪除偵聽器，因為每次視口邊界更改時都不希望被通知。

隨着V3 API的發展，這可能會在未來發生變化:-)

Answer 4

如果您正在使用Web組件 ，那么他們將此作為示例：

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

Answer 5

2018年：

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

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

Answer 6

GMap2::tilesloaded()將是您正在尋找的事件。

請參閱GMap2.tilesloaded以獲取參考。

Answer 7

變量map是GMap2類型的對象：

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

Answer 8

在我的例子中，在渲染圖像之前觸發了從遠程url和tilesloaded事件加載的Tile Image。

我用下面的方式解決了。

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

Answer 9

對於谷歌地圖 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" 時，雖然我確實得到了一個快速的 blip 然后跳轉到正確的地圖視圖，但它總是有效......所以我選擇了兩害相權取其輕的方法

Answer 10

這幾天你知道地圖是否准備好了：

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

Answer 11

我需要它來計算 map 邊界，所以這對我來說已經足夠了：

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

Answer 12

您可以每隔n毫秒檢查GMap2.isLoaded()方法，以查看是否已加載地圖及其所有切片（ window.setTimeout()或window.setInterval()是您的朋友）。

雖然這不會為您提供加載完成的確切事件，但它應該足以觸發您的Javascript。