请用JS调用百度地图实现以下功能,随机添加20个标注点,并且标注点事不同颜色的
时间: 2024-06-04 20:10:42 浏览: 12
地图。以下是示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>随机添加20个标注点</title>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<script>
// 初始化地图
var map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 北京市中心点
map.enableScrollWheelZoom(true);
// 随机生成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);
// 随机生成不同颜色的标注点
var color = "#" + Math.floor(Math.random() * 16777215).toString(16);
marker.setIcon(new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
offset: new BMap.Size(10, 25),
imageOffset: new BMap.Size(0, 0 - i * 25),
infoWindowOffset: new BMap.Size(10, 0),
anchor: new BMap.Size(10, 25),
imageSrc: color // 修改标注点的颜色
}));
map.addOverlay(marker);
}
</script>
</body>
</html>
```
注:需要替换代码中的密钥为自己的百度地图密钥。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)