Як я можу перевірити, чи повністю завантажені Карти Google?

Я вкладаю Карти Google у свій веб-сайт. Після завантаження Карт Google мені потрібно розпочати кілька процесів JavaScript.

Чи є спосіб автоматично визначити, коли Карти Google повністю завантажені, включаючи завантаження плитки та все?

Існує tilesloaded()метод, який повинен виконати саме це завдання, але він не працює .

Це мене на деякий час турбувало з GMaps v3.

Я знайшов спосіб зробити це так:

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

Подія "в режимі очікування" запускається, коли карта переходить у режим очікування - все завантажено (або не вдалося завантажити). Я виявив, що це більш надійно, а потім завантажений / bounds_changed, і за допомогою addListenerOnceметоду код у закритті виконується перший раз, коли "неробочий" запускається, а потім подія від'єднується.

Дивіться також розділ подій у Довідці Карт Google.

Я створюю 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
    });
});

Якщо ви використовуєте API Maps v3, це змінилося.

У версії 3 ви, по суті, хочете налаштувати слухача bounds_changedподії, який запуститься при завантаженні карти. Після того, як це спрацьовує, видаліть слухача, оскільки ви не хочете, щоб його повідомляли щоразу, коли змінюються межі вікна перегляду.

Це може змінитися в майбутньому, оскільки API V3 розвивається :-)

У 2018 році:

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

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

Якщо ви використовуєте веб-компоненти , вони мають такий приклад:

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

GMap2::tilesloaded() буде подією, яку ви шукаєте.

Див. Посилання GMap2.tilesloaded для довідок.

Де змінна mapє об'єктом типу GMap2:

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

У моєму випадку зображення плитки завантажується з віддаленого 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
});

Ви можете перевіряти GMap2.isLoaded()метод кожні nмілісекунди, щоб побачити, чи карта та всі її плитки завантажені ( window.setTimeout()чи window.setInterval()це ваші друзі).

Хоча це не дасть точну подію завершення завантаження, воно повинно бути досить гарним, щоб запустити Javascript.