Как сделать маркеры в лифте миганием

Есть ли простой способ сделать маркер в карте лифтов мигающим? Я имею в виду анимированное мигание - что-то вроде цикла перехода от непрозрачности 1.0 к непрозрачности 0.5 за 1 секунду, а затем назад, конца цикла.Как сделать маркеры в лифте миганием

источник

2017-01-26 Piotr Koleśnik

Я использую одушевленный. css в моих проектах. Доступен мигающий эффект. – redshift

Когда вы добавляете Marker, вы можете указать Icon - варианты для которого включают className. Вы можете использовать этот параметр className, чтобы анимировать значок маркера с помощью CSS.

var map = L.map('map').setView([51.505, -0.09], 13); 
 

 
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
 
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors', 
 
    maxZoom: 18 
 
}).addTo(map); 
 

 
L.marker([51.5, -0.09], { 
 
    icon: L.icon({ 
 
    iconUrl: 'https://unpkg.com/[email protected]/dist/images/marker-icon.png', 
 
    className: 'blinking' 
 
    }) 
 
}).addTo(map);

#map { 
 
    bottom: 0; 
 
    left: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
} 
 

 
@keyframes fade { 
 
    from { opacity: 0.5; } 
 
} 
 

 
.blinking { 
 
    animation: fade 1s infinite alternate; 
 
}

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> 
 
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> 
 
<div id="map"></div>

Для переключения маркеров мигать и немигающий, вы можете использовать листовку-х DomUtil добавить blinking класс img элемента маркеров:

// With the class added, the marker will blink: 
L.DomUtil.addClass(marker._icon, "blinking"); 

// Without the class, it won't: 
L.DomUtil.removeClass(marker._icon, "blinking");

источник

2017-01-27 07:23:42 cartant

Спасибо, но это не совсем то, что мне нужно. Мне нужно, чтобы маркер начал мигать в какой-то момент. Как получить доступ к значку маркера и изменить его имя класса? Я искал это в Интернете, но я не смог найти ответ. –

Вы можете в любое время изменить значок маркера, вызвав ['setIcon'] (http://leafletjs.com/reference-1.0.3.html#marker-seticon), поэтому просто вызывайте это, когда вам нужно изменить между не мигает и мигает значок. – cartant

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

Как сделать маркеры в лифте миганием

ответ

Смежные вопросы