Как вести подсчёт на сколько меток нажал пользователь на Яндекс картах

Можно ли как то написать скрипт который считает на сколько меток нажал пользователь при пользовании Яндекс картой. К примеру на сайте есть карта и выводиться 10 меток, как только пользователь нажимает на любую метку - появляется цифра 1. и так далее... - НО ЕСЛИ ПОЛЬЗОВАТЕЛЬ НАЖИМАЕТ повторно на ту метку на которую он уже нажимал - число не прибавляется!


Ответы (1 шт):

Автор решения: ksa

Можно ли как то написать скрипт который считает на сколько меток нажал пользователь при пользовании Яндекс картой. К примеру на сайте есть карта и выводиться 10 меток, как только пользователь нажимает на любую метку - появляется цифра 1. и так далее... - НО ЕСЛИ ПОЛЬЗОВАТЕЛЬ НАЖИМАЕТ повторно на ту метку на которую он уже нажимал - число не прибавляется!

Конечно можно!

  1. Достаточно прочитать как ставить те метки https://snipp.ru/js/yamaps-balloon

  2. Как обрабатывать клики https://ru.stackoverflow.com/questions/1069770/yandexmaps-Обработчик-событий-клик-на-описание-метки

  3. Знать как работает Set.

const s = new Set

ymaps.ready(init);      
//
function init() {
  var YANDEX_001_MAP = new ymaps.Map('yandex_001_map', {
    center: [44.5204668, 38.2559160],
    controls: ['zoomControl'],
    zoom: 10
  }, {
    minZoom: 8,
    maxZoom: 18,
    suppressObsoleteBrowserNotifier: true,
    yandexMapDisablePoiInteractivity: true,
    suppressMapOpenBlock: true
  });
  var PLACE_TOUR_00001 = new ymaps.Placemark([44.9735504, 35.2631896], 
    {hintContent: 'A',}, 
    {
      iconLayout: 'default#image',
      iconImageHref: '',
      iconImageSize: [0, 0]
    }
  );
  YANDEX_001_MAP.geoObjects.add(PLACE_TOUR_00001);
  setTimeout(function() {
    var PLACE_TOUR_00001 = new ymaps.Placemark([44.9735504, 35.2631896], {
      hintContent: 'B',
      iconContent: '+ 1',
      balloonContentHeader: 'HEADER',
      balloonContentBody: 'BODY',
      balloonContentFooter: 'FOOTER'
    }, {
      preset: 'islands#darkBlueStretchyIcon',
      balloonAutoPan: false
    });
    PLACE_TOUR_00001.events.add('click', function(islands) {
      islands.get('target').options.set('preset', 'islands#blackStretchyIcon');
    });
    PLACE_TOUR_00001.events.add('click', function() {
      YANDEX_001_MAP.panTo([44.9735504 + 1.600000000, 35.2631896 + 3.200000000], {
        delay: 1000,
        duration: 1000,
        timingFunction: 'ease-in-out'
      })
    });
    YANDEX_001_MAP.geoObjects.add(PLACE_TOUR_00001);
  }, 1000);
  var PLACE_TOUR_00002 = new ymaps.Placemark([44.8155334, 37.6567624], 
    {hintContent: 'C'}, 
    {
      iconLayout: 'default#image',
      iconImageHref: '',
      iconImageSize: [0, 0]
    }
  );
  YANDEX_001_MAP.geoObjects.add(PLACE_TOUR_00002);
  setTimeout(function() {
    var PLACE_TOUR_00002 = new ymaps.Placemark([44.8155334, 37.6567624], {
      hintContent: 'D',
      iconContent: '+ 1',
      balloonContentHeader: 'HEADER',
      balloonContentBody: 'BODY',
      balloonContentFooter: 'FOOTER'
    }, {
      preset: 'islands#darkBlueStretchyIcon',
      balloonAutoPan: false
    });
    PLACE_TOUR_00002.events.add('click', function(islands) {
      islands.get('target').options.set('preset', 'islands#blackStretchyIcon');
    });
    PLACE_TOUR_00002.events.add('click', function() {
      YANDEX_001_MAP.panTo([44.8155334 + 1.600000000, 37.6567624 + 3.200000000], {
        delay: 1000,
        duration: 1000,
        timingFunction: 'ease-in-out'
      })
    });
    YANDEX_001_MAP.geoObjects.add(PLACE_TOUR_00002);
  }, 2000);
  YANDEX_001_MAP.geoObjects.events.add('click', function (e) {
    // Получим ссылку на геообъект, по которому кликнул пользователь.
    const target = e.get('target');
    // фиксируем нажатие 
    s.add(target.properties._data.hintContent);
    // выводим количество
    test.textContent = s.size
  });
}
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<p>Количество кликов по меткам <span id="test">0</span></p> 
<div id="yandex_001_map" style="width: 100%; height: 400px;"></div>

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

Показываю...

const s = new Set
s.add('Раз')
s.add('Два')
s.add('Три')
let a = [...s]
let v = JSON.stringify(a)
console.log('Это уже строка, ее можно записывать.', typeof v, v)
a = JSON.parse(v)
console.log('Это уже массив, из него можно делать Set.', Array.isArray(a), a)
const sd = new Set(a)

→ Ссылка