主页 / 问题 / 1144445
Accepted
Ярослав
Asked:2020-06-23 03:07:45 +0000 UTC2020-06-23 03:07:45 +0000 UTC

如何在 Yandex 地图上的（静态）标记周围制作一个脉动的半透明圆圈，就像在 Yandex.Taxi 中的标记上一样？

  • 772

需要在 Yandex 地图上的标记周围做一个脉动的半透明圆圈，就像 Yandex 出租车中的标记一样。

яндекс-карты

1 个回答

  1. Best Answer

    类似的脉动可以通过你的元素的 CSS 动画来实现：animation: radial-pulse 2s infinite;.

    我们需要在地图的可移动支付中添加一个自定义的脉动元素，例如“区域”，并在移动地图后更新其位置。

    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/

    • 1

相关问题