更新时间:2023-12-05 21:49:04
添加 Marker
,您可以指定 Icon
-其选项包括 className
.您可以使用此className
选项通过CSS为标记的图标设置动画.
When you add a Marker
you are able to specify an Icon
- the options for which include a className
. You can use this className
option to animate the marker's icon via 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>
要将标记从闪烁切换为不闪烁,可以使用Leaflet的DomUtil
将blinking
类添加到标记的img
元素:
To toggle a marker from blinking to non-blinking, you can use Leaflet's DomUtil
to add the blinking
class to the marker's img
element:
// 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");