Google Maps (v3) фильтр по движению карты

Question

У меня есть магазин локатор, который отображает магазины в виде маркеров на карте и перечисляет их на боковой панели. Существует около 600 магазинов, и все они загружаются одновременно на странице загрузки через AJAX. Таким образом, у меня есть доступ ко всем им в массиве в любое время. Теперь, функциональность, которую я хочу, заключается в том, что когда пользователь перемещает / увеличивает масштаб в области просмотра, я получаю границы отображаемой текущей области и фильтрую результаты на боковой панели (массив местоположений, каждое местоположение имеет широту и долготу) в зависимости от того, будут ли они в этой области отображается. Затем я бы нарисовал маркеры соответствующих мест. По сути, все местоположения, которые будут видны в окне просмотра, также будут перечислены на боковой панели, сохраняя синхронизацию.

Может ли кто-нибудь указать мне правильное направление для реализации этого? Похоже ли это на эффективный способ использования этой функциональности?

Answer 1

Вам необходимо написать обработчик для события bounds_changed (дополнительная документация здесь )

google.maps.event.addListener(map, 'bounds_changed', function(){
  // your logic here - map.getBounds() will give you the updated bounds
});

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

Answer 2

Вы можете прикрепить событие Move / Zooms к карте и в основном сделать связанную проверку, чтобы скрыть / показать маркеры в пределах границы просмотра. Вы можете добиться этого, используя LatLngBounds(sw?:LatLng, ne?:LatLng), и сопоставить маркеры LatLng с текущими границами карты, используя getBounds();. Кроме того, в LatLngBounds есть способ проверить, находится ли LatLtn в границах contains(latLng:LatLng). Таким образом, вы должны просмотреть цикл ваших маркеров LatLng и проверить его.

API Google Map LatLngBounds

и

Google Map API Map

Что касается боковой панели, если у вас есть сохраненные маркеры, вы можете просто удалить или скрыть соответствующие местоположения на боковой панели.