Внедрение Google Maps на мой веб-сайт. После загрузки Карт Google мне нужно запустить несколько процессов JavaScript.
Есть ли способ автоматически обнаружить, когда Google Maps полностью загружен, в том числе загрузки файлов и т.д.
A tilesloaded() существует метод, который должен выполнить именно эту задачу, но он не работает.
Это немного беспокоило меня с помощью GMaps v3.
Я нашел способ сделать это вот так:
google.maps.event.addListenerOnce(map, 'idle', function(){
// do something only the first time the map is loaded
});
Событие "бездействия" запускается, когда карта переходит в состояние ожидания - все загружено (или не загружено). Я обнаружил, что он более надежный, чем patchloaded/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
});
});
Если вы используете Maps API v3, это изменилось.
В версии 3 вы действительно хотите настроить прослушиватель для события bounds_changed, который будет запускаться при загрузке карты. После того, как это вызвано, удалите прослушиватель, так как вы не хотите получать информацию каждый раз, когда изменяются границы области просмотра.
Это может измениться в будущем по мере развития V3 API: -)
Если вы используете веб-компоненты, у них есть это в качестве примера:
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");
});
В 2018 году:
var map = new google.maps.Map(...)
map.addListener('tilesloaded', function () { ... })
https://developers.google.com/maps/documentation/javascript/events
В моем случае перед визуализацией изображения был запущен Tile Image, загруженный из удаленного URL- tilesloaded и 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.