0

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

1 ответ 1

1

Подобную пульсацию можно реализовать через CSS анимацию своего элемента: animation: radial-pulse 2s infinite;.

Нужно добавить кастомизированный пульсирующий элемент на подвижный пейн карты, например 'areas', а после перемещения карты обновлять его позицию.

Для определения его корректного положения на карте используется map.Converter и getOffset.

В зависимости от размера такой псевдометки стоит задать её смещение.

var projection = myMap.options.get('projection'); 
var coords = [55.75, 37.61],
geo1,
pointOffset = 15, // половина размера псевдометки для коррекции центра
mapOffset = myMap.container.getOffset(); // получим смещение блока карты от угла страницы
// Преобразуем географические координаты в пиксели окна браузера
function geo2pix () {
 geo1 = myMap.converter.globalToPage(
    projection.toGlobalPixels(
        coords,
        myMap.getZoom()
    ));
}
// получим начальные координаты псевдометки
geo2pix ()

// Добавим пульсирующий элемент на пейн полигонов и получим ссылку на объект
$('<div><div id="pulse">Я</div></div>')
    .css({ position: 'absolute', left: (geo1[0]-pointOffset-mapOffset[0]), top: (geo1[1]-pointOffset-mapOffset[1])})
    .appendTo(myMap.panes.get('areas').getElement());
var pulseButton = document.getElementById("pulse");

// По окончании движения карты обновляем положение
myMap.events.add('boundschange', function () {
    geo2pix ()
    pulseButton.parentElement.style.left = (geo1[0]-pointOffset-mapOffset[0])+'px';
    pulseButton.parentElement.style.top = (geo1[1]-pointOffset-mapOffset[1])+'px';
})

Ну и пример на фиддле: https://jsfiddle.net/Coroner1st/nhea6y0d/29/

3
  • К сожалению работает только тогда, когда карта заполняет верх окна браузера. Если перед div карты (либо слева от неё), вставить дополнительный div любой высоты (ширины) - происходит смещение пульса от заданных координат маркера.. 28 июн 2020 в 19:38
  • Виноват, недоглядел. Стоит добавить определение положения блока с картой mapOffset = myMap.container.getOffset(); и добавить это смещение метке.
    – YaCor'
    28 июн 2020 в 22:55
  • 1
    Получение смещения карты mapOffset = myMap.container.getOffset(); нужно прописать так же в myMap.events.add('boundschange', function () {... поскольку при изменении размера окна - смещение тоже меняется. Спасибо огромное. 29 июн 2020 в 18:28

Ваш ответ

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

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