Я использую Google Maps API v3 на разрабатываемом мной веб-сайте. У меня есть раскрывающийся список под моей картой, который позволяет пользователю переключаться между различными наборами маркеров, отображаемых на карте. Каждый маркер отображается с помощью marker.setMap ()
.
Моя проблема в том, что на карте иногда требуется много времени для отображения новых маркеров, особенно в IE. Я хочу показать анимацию «Загрузка», когда карта переключает маркеры. Но я не знаю, как определить, когда карта завершила отображение новых данных (нет загрузки страницы, поскольку это все AJAX). Есть ли обратный вызов или прослушиватель событий для события setMap ()
, чтобы я мог вызвать функцию, чтобы остановить анимацию «Загрузка», когда завершится загрузка последнего маркера?
Похоже, что для setMap () нет обратного вызова или прослушивателя событий, но я нашел способ выполнить то, что хотел. Я загружаю карту Google с помощью jQuery. Вот мой код.
При инициализации карты я установил прослушиватель для события 'idle', который скрывает анимацию загрузки. Событие 'idle' запускается всякий раз, когда карта заканчивает перерисовку после изменения прокрутки или масштабирования:
google.maps.event.addListener(this.map, 'idle', function() {
$('#loading').hide();
});
И в моей функции очистки наложений я сначала показываю анимацию загрузки, а затем очищаю каждый маркер с помощью setMap (null). Затем я немного изменил центр карты, изменив долготу на 0,0000001. Это происходит после всех вызовов setMap () и запускает событие idle, которое скрывает анимацию загрузки.
// clear overlays from the map
function clearOverlays() {
$('#loading').show();
// clear the markers from the active data array
if (activeData) {
for (i in activeData) { activeData[i].setMap(null); }
}
activeData = '';
// very slightly recenter the map to trigger the 'idle' event
var centerlat = MYMAP.map.getCenter().lat();
var centerlng = MYMAP.map.getCenter().lng() + .000000001;
recenter = new google.maps.LatLng(centerlat, centerlng);
MYMAP.map.setCenter(recenter);
}
Это немного похоже на взлом, но я надеюсь, что кто-то еще сочтет это полезным.
Может быть, это поможет: http://www.basicslabs.com/Projects/progressBar/#Examples
и пример: http://www.basicslabs.com/Projects/progressBar /example/progressBar.html