Jak mogę sprawdzić, czy Mapy Google są w pełni załadowane?

Osadzam Mapy Google na mojej stronie internetowej. Po załadowaniu Map Google muszę uruchomić kilka procesów JavaScript.

Czy istnieje sposób automatycznego wykrywania, gdy Mapy Google są w pełni załadowane, w tym pliki do pobrania i inne?

Istnieje tilesloaded()metoda, która ma wykonać dokładnie to zadanie, ale nie działa .

Trochę mnie to martwiło przez GMaps v3.

Znalazłem sposób na zrobienie tego w ten sposób:

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

Zdarzenie „bezczynności” jest uruchamiane, gdy mapa przechodzi w stan bezczynności - wszystko zostało załadowane (lub nie udało się załadować). Stwierdziłem, że jest bardziej niezawodny niż tileloaded / bounds_changed i przy użyciu addListenerOncemetody kod w zamknięciu jest wykonywany przy pierwszym uruchomieniu „bezczynności”, a następnie zdarzeniu jest odłączone.

Zobacz także sekcję wydarzeń w Odwołaniu do Map Google.

Tworzę aplikacje mobilne HTML5 i zauważyłem, że idle, bounds_changedi tilesloadedogień zdarzenia, gdy obiekt jest tworzony i mapa renderowane (nawet jeśli nie jest widoczny).

Aby mój kod działał na mapie, gdy jest wyświetlany po raz pierwszy, wykonałem następujące czynności:

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

Jeśli korzystasz z Maps API v3, to się zmieniło.

W wersji 3 zasadniczo chcesz skonfigurować detektor bounds_changedzdarzenia, który zostanie uruchomiony po załadowaniu mapy. Gdy to się uruchomi, usuń nasłuchiwanie, ponieważ nie chcesz być informowany za każdym razem, gdy zmieniają się granice okienka ekranu.

Może się to zmienić w przyszłości wraz z rozwojem API V3 :-)

W 2018 r .:

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

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

Jeśli używasz komponentów internetowych , mają one jako przykład:

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

GMap2::tilesloaded() będzie to wydarzenie, którego szukasz.

Zobacz GMap2.tilesloaded o referencje.

Jeżeli zmienna mapjest obiektem typu GMap2:

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

W moim przypadku obraz płytki jest ładowany ze zdalnego adresu URL i tilesloaded zdarzenie zostały uruchomione przed renderowaniem obrazu.

Rozwiązałem z podążaniem brudną drogą.

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

Możesz sprawdzać GMap2.isLoaded()metodę co nmilisekundę, aby sprawdzić, czy mapa i wszystkie jej kafelki zostały załadowane ( window.setTimeout()lub czy window.setInterval()są Twoimi przyjaciółmi).

Chociaż nie da to dokładnego zdarzenia zakończenia ładowania, powinno wystarczyć do uruchomienia Javascript.