有没有一种简单的方法使Leaflet地图中的标记闪烁?我的意思是动画闪烁-类似于在1秒钟内从不透明度1.0到不透明度0.5的过渡循环,然后反向,循环结束。
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 © <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/leaflet@1.0.3/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/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<div id="map"></div>
DomUtil
向标记的img
元素添加blinking
类:// 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");