Google Maps API v3: есть ли обратный вызов или прослушиватель событий для события setMap()?

Я использую Google Maps API v3 на веб-сайте, который я разрабатываю. У меня есть раскрывающийся список под моей картой, который позволяет пользователю переключаться между различными наборами маркеров, отображаемых на карте. Каждый маркер отображается с помощью marker.setMap().

Моя проблема в том, что на карте иногда требуется много времени для отображения новых маркеров, особенно в IE. Я хочу показать анимацию «Загрузка», когда карта переключает маркеры. Но я не знаю, как определить, когда карта закончила отображать новые данные (нет загрузки страницы, так как это все AJAX). Есть ли обратный вызов или прослушиватель событий для события setMap(), поэтому я могу вызвать функцию для остановки анимации «Загрузка», когда последний маркер завершил загрузку?


google-maps javascript google-maps-api-3 google-maps-markers dom-events
person shipshape    schedule 11.08.2010    source источник

Ответы (2)


arrow_upward
23
arrow_downward

Кажется, нет обратного вызова или прослушивателя событий для setMap(), но я нашел способ выполнить то, что хотел. Я загружаю карту Google с помощью jQuery. Вот мой код.

При инициализации карты я настроил прослушиватель для события «idle», который скрывает анимацию «загрузки». Событие 'idle' запускается каждый раз, когда карта перерисовывается после прокрутки или изменения масштаба:

google.maps.event.addListener(this.map, 'idle', function() {
 $('#loading').hide();
});

И в моей функции очистки наложений я сначала показываю анимацию загрузки, а затем очищаю каждый маркер с помощью setMap(null). Затем я слегка центрирую карту, изменив долготу на 0,000000001. Это происходит после всех вызовов setMap() и запускает событие простоя, которое скрывает анимацию загрузки.

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

Это немного хак, но я надеюсь, что кто-то еще найдет это полезным.

person shipshape    schedule 12.08.2010
comment
Я пытался сделать то же самое. Я создаю предварительный загрузчик при простое запуска, затем визуализирую кластеризаторы маркеров, и когда все кластеры и маркеры настроены на сопоставление, я скрываю предварительный загрузчик. Но это не сработало, как ожидалось. Прелоадер не показывался (в DOM да, но сразу исчезал, на него не накладывался CSS). Ваш хак спас мой день. - person exoslav; 09.06.2017

arrow_upward
0
arrow_downward

Возможно, это поможет: http://www.basicslabs.com/Projects/progressBar/#Examples

и пример: http://www.basicslabs.com/Projects/progressBar/example/progressBar.html

person Dziad Borowy    schedule 19.08.2010
comment
Спасибо - я взглянул на него, и он выглядит полезным, но я не смог заставить его работать должным образом без существенного изменения моего кода, и решение, которое у меня есть сейчас, работает для меня. - person shipshape; 21.08.2010