百度地图标注点动画效果：椭圆和水波扩散
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度地图多点标注示例</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=G9NGPycxMLGeUDIKd4AeQjDO7SMaCiGi"></script>
<script type="text/javascript" src="static/admin_img/map/js/infoBox.js"></script>
<style type="text/css">
#map {
position: absolute;
width: 100%;
height: 100%;
}
.circle {
position: absolute;
width: 100px;
height: 50px;
border: 2px solid red;
border-radius: 50%;
opacity: 0.5;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(0.4);
opacity: 0.5;
}
100% {
transform: scale(1.4);
opacity: 0;
}
}
.ripple {
position: absolute;
width: 100px;
height: 100px;
border: 2px solid blue;
border-radius: 50%;
opacity: 0.5;
animation: ripple 2s infinite;
}
@keyframes ripple {
0% {
transform: scale(0.4);
opacity: 0.5;
}
100% {
transform: scale(1.4);
opacity: 0;
}
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = new BMap.Map("map");
map.setMapStyle({
style: 'midnight'
});
var point = new BMap.Point(108.34138, 22.819153); // 设置中心点坐标
map.centerAndZoom(point, 16); // 设置地图级别
<p>// 添加多个点标注
var markers = [
{
point: new BMap.Point(108.361812, 22.819742), content: "这是第一个点"
},
{
point: new BMap.Point(108.341304, 22.819313), content: "这是第二个点"
},
{
point: new BMap.Point(108.328287, 22.824908), content: "这是第三个点"
}
];</p>
<p>for (var i = 0; i < markers.length; i++) {
var marker = new BMap.Marker(markers[i].point);
map.addOverlay(marker);</p>
<p>// 添加infoBox信息窗
var infoBox = new BMapLib.InfoBox(map, markers[i].content, {
boxStyle: {
width: "200px",
height: "100px",
border: "1px solid #ccc",
borderRadius: "5px",
backgroundColor: "#000",
padding: "10px",
fontSize: "14px",
lineHeight: "20px",
color: "#fff",
},
closeIconMargin: "10px 2px 0 0",
enableAutoPan: true,
align: INFOBOX_AT_TOP
});</p>
<p>marker.addEventListener("click", function () {
infoBox.open(this);
});</p>
<p>// 添加椭圆
var circle = document.createElement('div');
circle.className = 'circle';
marker.getPanes().labelPane.appendChild(circle);</p>
<p>// 设置椭圆位置
var position = map.pointToOverlayPixel(marker.getPosition());
circle.style.left = position.x - 50 + 'px';
circle.style.top = position.y - 25 + 'px';</p>
<p>// 添加水波
var ripple = document.createElement('div');
ripple.className = 'ripple';
marker.getPanes().labelPane.appendChild(ripple);</p>
<p>// 设置水波位置
var position = map.pointToOverlayPixel(marker.getPosition());
ripple.style.left = position.x - 50 + 'px';
ripple.style.top = position.y - 50 + 'px';
}</p>
<p>// 启用滚轮缩放
map.enableScrollWheelZoom(true);</p>
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/pNeo 著作权归作者所有。请勿转载和采集!