Как вести подсчёт на сколько меток нажал пользователь на Яндекс картах
Можно ли как то написать скрипт который считает на сколько меток нажал пользователь при пользовании Яндекс картой. К примеру на сайте есть карта и выводиться 10 меток, как только пользователь нажимает на любую метку - появляется цифра 1. и так далее... - НО ЕСЛИ ПОЛЬЗОВАТЕЛЬ НАЖИМАЕТ повторно на ту метку на которую он уже нажимал - число не прибавляется!
Ответы (1 шт):
Можно ли как то написать скрипт который считает на сколько меток нажал пользователь при пользовании Яндекс картой. К примеру на сайте есть карта и выводиться 10 меток, как только пользователь нажимает на любую метку - появляется цифра 1. и так далее... - НО ЕСЛИ ПОЛЬЗОВАТЕЛЬ НАЖИМАЕТ повторно на ту метку на которую он уже нажимал - число не прибавляется!
Конечно можно!
Достаточно прочитать как ставить те метки https://snipp.ru/js/yamaps-balloon
Как обрабатывать клики https://ru.stackoverflow.com/questions/1069770/yandexmaps-Обработчик-событий-клик-на-описание-метки
Знать как работает
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)