百度地图多点情况下,点击标注点更换标注点颜色,点击其他标注点时则原来的标注点变回原来的颜色
时间: 2024-05-04 22:18:07 浏览: 13
实现这个功能可以通过以下步骤:
1. 定义一个变量来存储当前选中的标注点的索引,初始值为 -1,表示没有选中任何标注点。
2. 定义一个数组来存储所有的标注点。
3. 在标注点点击事件的回调函数中,首先判断当前点击的标注点是否已经被选中。如果已经被选中,则不做任何处理;否则,将之前选中的标注点颜色还原,并将当前标注点的颜色修改为选中状态。
4. 在修改标注点颜色的函数中,首先判断该标注点是否为当前选中的标注点。如果是,则将其颜色修改为选中状态;否则,将其颜色修改为未选中状态。
下面是一个示例代码:
```javascript
// 定义变量
var selectedIndex = -1;
var markers = [];
// 在地图初始化完成后创建标注点
map.addEventListener('tilesloaded', function() {
var points = [
{ lng: 116.404, lat: 39.915 },
{ lng: 116.406, lat: 39.916 },
{ lng: 116.408, lat: 39.917 }
];
points.forEach(function(point, index) {
var marker = new BMap.Marker(new BMap.Point(point.lng, point.lat));
marker.addEventListener('click', function() {
if (selectedIndex !== index) {
// 还原之前选中的标注点颜色
if (selectedIndex >= 0) {
resetMarkerColor(markers[selectedIndex]);
}
// 修改当前标注点颜色
setSelectedMarkerColor(marker);
selectedIndex = index;
}
});
markers.push(marker);
map.addOverlay(marker);
});
});
// 修改标注点颜色
function setSelectedMarkerColor(marker) {
marker.setAnimation(BMAP_ANIMATION_BOUNCE);
marker.setIcon(new BMap.Icon('selected-icon.png', new BMap.Size(32, 32)));
}
function resetMarkerColor(marker) {
marker.setAnimation(null);
marker.setIcon(new BMap.Icon('normal-icon.png', new BMap.Size(32, 32)));
}
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)