小程序地图上marker点击后改变尺寸并且将所有分类下的marker恢复原来大小,并将地图中心位置以该MARKER为中心
时间: 2024-05-03 17:21:53 浏览: 20
可以通过以下步骤实现:
1. 在marker的点击事件中,获取当前点击的marker对象,并将其尺寸改变为需要的大小。
2. 遍历所有分类下的marker,并将它们的尺寸恢复为原来的大小。
3. 将地图中心位置以该marker为中心,使用小程序API的map.moveToLocation()方法实现。
下面是示例代码:
```
// marker点击事件
onMarkerTap(e) {
const markerId = e.markerId;
// 获取当前点击的marker对象
const marker = this.data.markers.find(m => m.id === markerId);
// 将其尺寸改变为需要的大小
marker.width = 40;
marker.height = 40;
// 遍历所有分类下的marker,并将它们的尺寸恢复为原来的大小
this.data.categories.forEach(c => {
c.markers.forEach(m => {
if (m.id !== markerId) {
m.width = 20;
m.height = 20;
}
});
});
// 将地图中心位置以该marker为中心
this.mapCtx.moveToLocation({
latitude: marker.latitude,
longitude: marker.longitude,
success: () => {
console.log('移动地图成功');
},
fail: () => {
console.log('移动地图失败');
}
});
// 更新数据
this.setData({
markers: this.data.markers,
categories: this.data.categories
});
}
```
注意:上面的代码仅供参考,具体实现可能会因为业务逻辑不同而有所不同。
相关推荐
![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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)