Добавить новые уникальные маркеры к существующему набору маркеров (Google Maps)

Question

У меня есть карты Google, которые получают информацию о маркере (LatLng и т. Д.) Из сценария PHP через JSON. Есть слушатель Google Maps, который удаляет все существующие маркеры, извлекает маркеры на bounds_changed и добавляет их на карту.

Проблема: Из-за большого количества маркеров, рисуемых на карте, каждый раз, когда пользователь изменяет границы карты (перетаскивание, масштабирование ...), ALL маркеры удаляется, извлекается и добавляется снова, что вызывает довольно большую задержку, в основном из-за рисования новых маркеров (я думаю). Часто пользователь просто немного меняет границы, что приводит к повторному добавлению, возможно, 75% маркеров.

Чтобы ускорить это, я решил, что на событии bounds_changed карта должна очищать только маркеры, которые теперь связаны с границами карты, и загружать и добавлять новые маркеры, которые теперь находятся в границах карты. Как это можно сделать?

Дополнительная информация: У меня есть массив markers[], где все вновь созданные маркеры pushed в

Answer 1

Я предлагаю вам взглянуть на MarkerManager Library

Это должно помочь вам, и вы избежите развертывания своего собственного решения.

Answer 2

Прежде всего, событие bounds_changed срабатывает непрерывно, когда пользователь панорамирует карту. Вы должны сделать что-то подобное в обработчике событий:

if(reloadTimer){
  clearTimeout(reloadTimer);
}
reloadTimer = setTimeout(function(){
  // fetch new data
}, 400);

Во-вторых, если вы можете минимизировать количество запросов, кэшируя некоторые данные на клиенте, пользовательский интерфейс, вероятно, будет гораздо более отзывчивым. Вы можете кэшировать довольно большое количество маркеров на клиенте и при этом поддерживать отличную производительность. Помните, что маркеры должны быть удалены с карты, если они находятся за пределами видимых границ, так как это ухудшит производительность.

Вы можете кэшировать данные на клиенте несколькими способами, в основном в зависимости от ваших пользователей и того, как они используют ваше приложение. Самый быстрый способ реализовать кэширование - это передать все данные с сервера за один запрос и создать структуру данных в javascript, с которой карта получит маркеры. Эта структура данных будет существовать в области видимости страницы и ускорить операции с картой. Ответ сервера также может кэшироваться в браузере, если вы можете позволить себе устанавливать заголовки срока действия на определенное время.

Если ваши пользователи вернутся к вашему приложению, вы можете сохранить структуру данных в localStorage или sessionStorage, используя HTML5. Возможно, вы могли бы регулярно обновлять данные, когда пользователь бездействует на вашей странице.

Подробнее о местном магазине: http://diveintohtml5.info/storage.html

PS! Вам также следует следовать советам skarE по использованию события ожидания вместо bounds_changed.

PPS! Когда дело доходит до отображения маркеров на карте, MarkerManager - хорошая идея. Я также рекомендую MarkerClusterer (http://google -maps-utility-library-v3.googlecode.com / svn / trunk / markerclusterer / docs / reference.html ), если вы хотите объединить маркеры в областях с высоким маркером плотность в группы кластеров.