Как сделать на Яндекс карте вокруг метки (статической) пульсирующий полупрозрачный круг, как на метке в Яндекс.Такси?
Необходимо сделать вокруг метки на карте Яндекс пульсирующий полупрозрачный круг, как на метке в яндекс такси.
Ответы (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/