有没有一种简单的方法可以使传单地图中的标记闪烁？我的意思是动画闪烁 - 类似于 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/[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>
要将标记从闪烁切换为不闪烁，您可以使用 LeafletDomUtil添加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");
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
