百度地图多点标注示例：添加发光呼吸灯动画效果
<!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%;
}
</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); // 设置地图级别
<pre><code> // 添加多个点标注
var markers = [
{ x: 116.404, y: 39.915, content: '这是第一个点' },
{ x: 116.414, y: 39.925, content: '这是第二个点' },
{ x: 116.424, y: 39.935, content: '这是第三个点' }
];
for (var i = 0; i < markers.length; i++) {
var marker = new BMap.Marker(new BMap.Point(markers[i].x, markers[i].y));
map.addOverlay(marker);
// 添加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
});
marker.addEventListener('click', function () {
infoBox.open(this);
});
// 添加发光呼吸灯动画效果
(function (marker) {
var defaultIcon = marker.getIcon();
var size = new BMap.Size(defaultIcon.size.width, defaultIcon.size.height);
var icon = new BMap.Icon(defaultIcon.imageUrl, size, {
imageSize: size,
anchor: new BMap.Size(size.width / 2, size.height),
imageOffset: new BMap.Size(-size.width / 2, -size.height)
});
var animation = new BMap.MarkerAnimation(marker, { icon: icon });
animation.start();
marker.addEventListener('click', function () {
animation.stop();
});
})(marker);
}
// 启用滚轮缩放
map.enableScrollWheelZoom(true);
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/pNeb 著作权归作者所有。请勿转载和采集!