2

Есть карта Google Maps на которой расположены маркеры. Маркеры берутся из базы данных, в которой записаны их координаты и категория. При get запросе category на карте отображаются только маркеры из указанной категории.

Нужно реализовать обновление маркеров динамически, т.е. чтобы при клике на определенный div отображались только маркеры выбранной категории.

Также, нужно сделать возможность выбора нескольких категорий.

Подскажите, как это можно реализовать.

Как еще один вариант решения проблемы, нужно получить текущие координаты (lat, lng) карты и zoom и передавать из в get запросе.

4
  • Вы забыли написать суть проблемы. 3 янв 2016 в 9:35
  • Суть проблемы в том, что я не знаю как это сделать
    – t16bz
    3 янв 2016 в 9:36
  • маркеры уже разделены на категории или их еще нужно разделить?
    – redL1ne
    3 янв 2016 в 9:37
  • Есть база данных, в которой прописаны координаты для маркеров, а также категории. На сайте есть цикл, который на основе данных из базы расставляет маркеры на карте. По умолчанию отображаются все маркеры, при наличии get параметра, только маркеры указанной категории.
    – t16bz
    3 янв 2016 в 9:41

1 ответ 1

2

Если проблема еще не решена, то

** удалил все предыдущие предложения и переписал **

Итак, вот описание и ниже работающий пример.
(CSS можете игнорировать)

HTML

  • создаем div, где будет карта
  • создаем три div с кнопками, которые будут показывать/скрывать маркеры на карте
  • у каждой кнопки добавляем аттрибут data-category="[имя-категории-этой-кнопки]". Позже в JS мы будем использовать это значение для сравнения с категориями маркеров.

JS

  • объект map создается пустым вне всех функций, потому что он нам будет нужен в несколькоих функциях
  • создаем карту с некими аттрибутами и пустым массивом markers
  • создаем 6 маркеров (я так понимаю, что у Вас они будут создаваться в php цикле). Заметьте, что у каждого маркера своя переменная (marker1, marker2 и т.д.), однако, если нигде в коде именно к этим переменным вы обращаться не будете, а только работать с массивом маркеров, тогда нет необходимости создавать разные переменные. Как только маркер создан и добавлен в map.markers, переменные marker1, marker2 и т.д. будут не нужны.
  • также обратите внимание, что у каждого маркера есть дополнительный аттрибут category. (раньше я предлагал делать filter: {type='category';}, но, как оказалось, можно проще. Именно этот аттрибут мы будем использовать для вкл/выкл маркеров на карте
  • каждый маркер добавляется в массив маркеров map.markers.push(markerХ);
  • для каждой кнопки .markerBtn создается событие на click.

При нажатии на кнопку markerBtn

  • выясняем значение data-category нажатой кнопки
  • пролистываем массив map.markers
  • для каждого элемента массива сравниваем значение ['category'] маркера с категорией нажатой кнопки
  • если совпадает, то включаем/выключаем маркер

var map = {};

function initialize() {

  var mapProp = {
    center: {
      lat: -25.363,
      lng: 131.044
    },
    zoom: 8,
    markers: []
  };

  map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

  var marker1 = new google.maps.Marker({
    position: {
      lat: -25.363,
      lng: 131.044
    },
    icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
    map: map,
    category: 'blue',
  });
  map.markers.push(marker1);
  var marker2 = new google.maps.Marker({
    position: {
      lat: -25.664,
      lng: 131.044
    },
    icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
    map: map,
    category: 'green',
  });
  map.markers.push(marker2);
  var marker3 = new google.maps.Marker({
    position: {
      lat: -25.365,
      lng: 131.144
    },
    icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
    map: map,
    category: 'red',
  });
  map.markers.push(marker3);
  var marker4 = new google.maps.Marker({
    position: {
      lat: -25.366,
      lng: 131.244
    },
    icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
    map: map,
    category: 'blue',
  });
  map.markers.push(marker4);
  var marker5 = new google.maps.Marker({
    position: {
      lat: -25.565,
      lng: 131.144
    },
    icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
    map: map,
    category: 'red',
  });
  map.markers.push(marker5);
  var marker6 = new google.maps.Marker({
    position: {
      lat: -25.666,
      lng: 131.244
    },
    icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
    map: map,
    category: 'green',
  });
  map.markers.push(marker6);

}
google.maps.event.addDomListener(window, 'load', initialize);


$(document).ready(function() {
  $('.markerBtn').bind('click', function(el) {
    var catToToggle = $(this).attr('data-category');
    $.each(map.markers, function() {
      if (this['category'] == catToToggle) {
        this.setVisible(!this.getVisible());
      }
    });
  });
});
.markerBtn {
  float: left;
cursor: pointer;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<div id="googleMap" style="width:500px;height:380px; "></div>
Нажмите на маркер слева, чтобы скрыть/показать на карте
<div class="markerBtn" data-category="green">
  <img src="http://maps.google.com/mapfiles/ms/icons/green-dot.png" width="50">
</div>
<div class="markerBtn" data-category="red">
  <img src="http://maps.google.com/mapfiles/ms/icons/red-dot.png" width="50">
</div>
<div class="markerBtn" data-category="blue">
  <img src="http://maps.google.com/mapfiles/ms/icons/blue-dot.png" width="50">
</div>

Надеюсь, что используя этот вариант как пример Вы сможете заставить свой код работать.

Удачи.

9
  • при добавлении фильтра, маркеры перестаю отображаться
    – t16bz
    8 янв 2016 в 6:38
  • к сожалению результат тот же. Вот так создаю маркер: var marker<?=$id ?> = new google.maps.Marker({ position: {lat: <?=$lat; ?>, lng: <?=$lng; ?>}, map: map, icon: image, filter: { type: $marker<?=$id ?>.data(<?=$cat_id; ?>) } });
    – t16bz
    8 янв 2016 в 7:12
  • Теперь маркеры, отображаются, но при клике не исчезают. При добавлении строки map.markers.push(marker<?=$id; ?>); отображается только первый маркер, но все равно не исчезает.
    – t16bz
    8 янв 2016 в 7:36
  • Да, пробовал по-разному, не исчезают. Маркеры у меня создаются вот так var marker<?=$id; ?> = new google.maps.Marker({ т.е. получается, что каждый маркер мсеет уникальное имя marker1, marker2 ... markerN
    – t16bz
    8 янв 2016 в 7:48
  • Вот такая ошибка при клике Uncaught TypeError: Cannot read property 'length' of undefined
    – t16bz
    8 янв 2016 в 8:01

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.