请用JS调用百度地图实现以下功能,随机添加20个标注点,并且是不同颜色的,还会闪烁的标注点
时间: 2024-05-24 14:10:05 浏览: 98
js 调用百度地图api并在地图上进行打点添加标注
以下是使用JavaScript调用百度地图实现随机添加20个标注点,并且不同颜色的闪烁标注点的代码:
```javascript
// 初始化地图
var map = new BMap.Map("map-container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
// 随机添加20个标注点
for (var i = 0; i < 20; i++) {
var point = new BMap.Point(
116.404 + Math.random() * 0.1,
39.915 + Math.random() * 0.1
);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
}
// 添加不同颜色的闪烁标注点
var colors = ["red", "blue", "green", "yellow", "purple"];
for (var i = 0; i < colors.length; i++) {
var point = new BMap.Point(
116.404 + Math.random() * 0.1,
39.915 + Math.random() * 0.1
);
var marker = new BMap.Marker(point, {
icon: new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
imageOffset: new BMap.Size(0, -100 + i * -25),
anchor: new BMap.Size(12, 25)
})
});
map.addOverlay(marker);
// 闪烁效果
setInterval(function() {
marker.show();
setTimeout(function() {
marker.hide();
}, 500);
}, 1000);
}
```
注:以上代码中的闪烁效果采用了setInterval和setTimeout函数实现,可以根据需要进行调整。
阅读全文