Как сделать на Яндекс карте вокруг метки (статической) пульсирующий полупрозрачный круг, как на метке в Яндекс.Такси?

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


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

Автор решения: YaCor'

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

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

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

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

var projection = myMap.options.get('projection'); 
var coords = [55.75, 37.61],
geo1,
pointOffset = 15 // половина размера псевдометки для коррекции центра

// Преобразуем географические координаты в пиксели окна браузера
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), top: (geo1[1]-pointOffset)})
    .appendTo(myMap.panes.get('areas').getElement());
var pulseButton = document.getElementById("pulse");

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

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

→ Ссылка