Фильтрация маркеров на Яндекс.карте | Блог веб-разработчика MaxGraph

Фильтрация маркеров на Яндекс.карте

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

Первое, что хочется сказать — это некая условность метода. В нем используется старая версия api карт, а именно 2.0. У меня как не было времени писать под последнюю версию код во время разработки сайта, так и сейчас нет) Но в целом, я думаю что можно это написать и на новой версии. Пример рабочей карты можно глянуть здесь: https://group-sfera.ru/. Там пример чуть-чуть сложнее, но не суть.

 

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="nav-map">
  <p>Показать:</p>
  <ul class="nav nav-list">
    <li id="group-0" class="nav-header active">
      <span class="label label-important">Все</span></li>
    <li id="group-1" class="nav-header">
      <span class="label label-important">Инженерные изыскания</span></li>
    <li id="group-2" class="nav-header">
      <span class="label label-success">Архитектурно­строительное проектирование</span></li>
    <li id="group-3" class="nav-header">
      <span class="label label-warning">Экологическое проектирование</span></li>
  </ul>
</div>
 
<div class="map" id="map"></div>
<div class="nav-map">
  <p>Показать:</p>
  <ul class="nav nav-list">
    <li id="group-0" class="nav-header active">
      <span class="label label-important">Все</span></li>
    <li id="group-1" class="nav-header">
      <span class="label label-important">Инженерные изыскания</span></li>
    <li id="group-2" class="nav-header">
      <span class="label label-success">Архитектурно­строительное проектирование</span></li>
    <li id="group-3" class="nav-header">
      <span class="label label-warning">Экологическое проектирование</span></li>
  </ul>
</div>

<div class="map" id="map"></div>

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

CSS

Данный код вообще неважен, посмотрите в кодпене.

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
ymaps.ready(init);
var contMap;
function init() {
  var myMap = new ymaps.Map('map', {
    center: [50.443705, 30.530946],
    zoom: 20,
    controls: ['zoomControl']
  },
                            {
    suppressMapOpenBlock: true
  });
  myMap.controls.add('smallZoomControl');
  myMap.behaviors.disable('scrollZoom');
  
  // 1. Создаем группы
  
  // Эту группу не будем добавлять на карту, чтобы помещенные в нее геообъекты были не видны.
  hidden = new ymaps.GeoObjectCollection(),
    // Эту группу добавим на карту.
    visible = new ymaps.GeoObjectCollection(),
    // Упорядоченные коллекции с геообъектами.
    group0 = new ymaps.GeoObjectCollection({
    properties: {
      id: 'group-0',
      name: 'Все'
    }
  }),
    group1 = new ymaps.GeoObjectCollection({
    properties: {
      id: 'group-1',
      name: 'Инженерные изыскания'
    }
  }, {}),
    group2 = new ymaps.GeoObjectCollection({
    properties: {
      id: 'group-2',
      name: 'Архитектурно­строительное проектирование'
    }
  }, {}),
    group3 = new ymaps.GeoObjectCollection({
    properties: {
      id: 'group-3',
      name: 'Экологическое проектирование'
    }
  }, {});
 
 
  // 2. Наполняем группы геообъектами.
  group1
    .add(placemark1 = new ymaps.Placemark([50.426472, 30.563022], { id: 'group-1-1'}))
 
  group2
    .add(placemark4 = new ymaps.Placemark([50.50955, 30.60791], { id: 'group-2-1'}))
 
  group3
    .add(placemark7 = new ymaps.Placemark([50.443334, 30.520163], { id: 'group-3-1'}))
 
  group0
    .add(group1)
    .add(group2)
    .add(group3);
 
  // 3. Добавляем все группы в одну коллекцию.
  visible
    .add(group1)
    .add(group2)
    .add(group3);
 
 
  // 4. Добавляем все группы на карту.
  myMap.geoObjects.add(visible);
 
  // Выставляем масштаб карты чтобы были видны все группы.
  myMap.setBounds(visible.getBounds());
 
  // 5. Обрабатываем клики на пунктах меню.
  $('.nav-header').on('click', function (e) {
    // Скрываем/отображаем пункты меню данной группы.
    $('.nav-header').removeClass('active');
    $(this).addClass('active')
    // Скрываем/отображаем коллекцию на карте.
    groupToggle(this.id);
  });
 
  // Ищем нужную группу и добавляем/удаляем ее с карты.
  function groupToggle(id) {
    // Все группы лежат внутри одной коллекции, которую мы получили из YMapsML.
    var it, group;
 
    // Сначала ищем в видимой на карте коллекции.
    it = visible.getIterator();
    while(group = it.getNext()) {
      hidden.add(group);
    }
    while(group = it.getNext()) {
      if(group.properties.get('id') === id) {
        visible.add(group);
        return;
      }
    }
 
    // Если мы сюда попали, значит коллекция уже удалена и надо искать в удаленных.
    it = hidden.getIterator();
    while(group = it.getNext()) {
      if(group.properties.get('id') === id) {
        visible.add(group);
        return;
      }
    }
  }
 
  // Ищем нужную метку и открываем/закрываем ее балун.
 
  $('#group-0').on('click', function () {
    var it = hidden.getIterator(),
        group;
    while(group = it.getNext()) {
      visible.add(group);
    }
  })
}
ymaps.ready(init);
var contMap;
function init() {
  var myMap = new ymaps.Map('map', {
    center: [50.443705, 30.530946],
    zoom: 20,
    controls: ['zoomControl']
  },
                            {
    suppressMapOpenBlock: true
  });
  myMap.controls.add('smallZoomControl');
  myMap.behaviors.disable('scrollZoom');
  
  // 1. Создаем группы
  
  // Эту группу не будем добавлять на карту, чтобы помещенные в нее геообъекты были не видны.
  hidden = new ymaps.GeoObjectCollection(),
    // Эту группу добавим на карту.
    visible = new ymaps.GeoObjectCollection(),
    // Упорядоченные коллекции с геообъектами.
    group0 = new ymaps.GeoObjectCollection({
    properties: {
      id: 'group-0',
      name: 'Все'
    }
  }),
    group1 = new ymaps.GeoObjectCollection({
    properties: {
      id: 'group-1',
      name: 'Инженерные изыскания'
    }
  }, {}),
    group2 = new ymaps.GeoObjectCollection({
    properties: {
      id: 'group-2',
      name: 'Архитектурно­строительное проектирование'
    }
  }, {}),
    group3 = new ymaps.GeoObjectCollection({
    properties: {
      id: 'group-3',
      name: 'Экологическое проектирование'
    }
  }, {});


  // 2. Наполняем группы геообъектами.
  group1
    .add(placemark1 = new ymaps.Placemark([50.426472, 30.563022], { id: 'group-1-1'}))

  group2
    .add(placemark4 = new ymaps.Placemark([50.50955, 30.60791], { id: 'group-2-1'}))

  group3
    .add(placemark7 = new ymaps.Placemark([50.443334, 30.520163], { id: 'group-3-1'}))

  group0
    .add(group1)
    .add(group2)
    .add(group3);

  // 3. Добавляем все группы в одну коллекцию.
  visible
    .add(group1)
    .add(group2)
    .add(group3);


  // 4. Добавляем все группы на карту.
  myMap.geoObjects.add(visible);

  // Выставляем масштаб карты чтобы были видны все группы.
  myMap.setBounds(visible.getBounds());

  // 5. Обрабатываем клики на пунктах меню.
  $('.nav-header').on('click', function (e) {
    // Скрываем/отображаем пункты меню данной группы.
    $('.nav-header').removeClass('active');
    $(this).addClass('active')
    // Скрываем/отображаем коллекцию на карте.
    groupToggle(this.id);
  });

  // Ищем нужную группу и добавляем/удаляем ее с карты.
  function groupToggle(id) {
    // Все группы лежат внутри одной коллекции, которую мы получили из YMapsML.
    var it, group;

    // Сначала ищем в видимой на карте коллекции.
    it = visible.getIterator();
    while(group = it.getNext()) {
      hidden.add(group);
    }
    while(group = it.getNext()) {
      if(group.properties.get('id') === id) {
        visible.add(group);
        return;
      }
    }

    // Если мы сюда попали, значит коллекция уже удалена и надо искать в удаленных.
    it = hidden.getIterator();
    while(group = it.getNext()) {
      if(group.properties.get('id') === id) {
        visible.add(group);
        return;
      }
    }
  }

  // Ищем нужную метку и открываем/закрываем ее балун.

  $('#group-0').on('click', function () {
    var it = hidden.getIterator(),
        group;
    while(group = it.getNext()) {
      visible.add(group);
    }
  })
}

Вся магия происходит здесь. Давайте пойдем по порядку, по частям.

1)  Через GeoObjectCollection() создаем коллекции. hidden — для скрытых маркеров, visible для видимых. Ну и видим, что в properties прописываем нужные id.

2) В каждую из групп добавляем по маркеру.

3) Добавляем эти группы в коллекцию visible, чтобы были видны сперва все сразу.

4) myMap.geoObjects.add(visible); — через данный метод добавляем всю коллекцию на карту.

5) В обработчике клика на элемент меню получаем id и через groupToggle() отображаем определенную группу. В принципе, код groupToggle прокомментирован, ничего сложного.

 

JS (ховер)

1
2
3
4
5
6
7
8
9
10
placemark1.events.add('mouseenter', function (e) {
        e.get('target').options.set('iconImageHref',
'img/location_blue_on.svg');
})
.add('mouseleave', function (e) {
        if (e.get('target') !== selectedPlacemark) {
                // убираем иконку только если это не текущий маркер
                e.get('target').options.unset('iconImageHref');
        }
})
placemark1.events.add('mouseenter', function (e) {
		e.get('target').options.set('iconImageHref',
'img/location_blue_on.svg');
})
.add('mouseleave', function (e) {
		if (e.get('target') !== selectedPlacemark) {
				// убираем иконку только если это не текущий маркер
				e.get('target').options.unset('iconImageHref');
		}
})

В качестве бонуса еще покажу как сделать ховер по маркерам. Просто определенному маркеру добавляем обработчики. Так же можно и клик добавить, если нужно по клику что-то сделать.

Ну и конечно, пен:

 

Надеюсь, Вам было полезно. Если есть вопросы — пишите, я на все что смогу отвечу =)

 

Метки: , , , ,

Понравилось? Оцени!
12345 (Пока оценок нет)
Загрузка...

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *