小程序地图上marker点击后改变尺寸并且将上个点击过的marker恢复原来大小,并将地图中心位置以该MARKER为中心
时间: 2024-06-11 08:09:37 浏览: 91
腾讯地图、微信小程序、轨迹、路线图、marker标记点
可以按照以下步骤实现:
1. 在小程序地图上设置marker的点击事件,获取到当前点击的marker的id。
2. 遍历所有的marker,将除了当前点击的marker以外的其他marker的尺寸恢复原来大小。
3. 将当前点击的marker的尺寸变大。
4. 获取当前点击的marker的位置信息,将地图中心位置设置为该marker的位置。
以下是示例代码:
```javascript
Page({
data: {
markers: [{id:1,latitude: 22.546828,longitude: 114.062589,width:50,height:50},
{id:2,latitude: 22.547183,longitude: 114.063365,width:50,height:50},
{id:3,latitude: 22.546915,longitude: 114.064038,width:50,height:50}],
centerLatitude:22.546828,
centerLongitude:114.062589
},
//marker的点击事件
markertap(e){
//获取当前点击的marker的id
let markerId = e.markerId;
//遍历所有的marker
let markers = this.data.markers;
for(let i=0;i<markers.length;i++){
//将除了当前点击的marker以外的其他marker的尺寸恢复原来大小
if(markers[i].id != markerId){
markers[i].width = 50;
markers[i].height = 50;
}
//将当前点击的marker的尺寸变大
else{
markers[i].width = 60;
markers[i].height = 60;
//获取当前点击的marker的位置信息,将地图中心位置设置为该marker的位置
this.setData({
centerLatitude: markers[i].latitude,
centerLongitude: markers[i].longitude
})
}
}
//更新markers数据
this.setData({
markers: markers
})
}
})
```
在上面的代码中,我们在data中定义了三个marker和地图中心位置的经纬度。在markertap事件中,我们根据当前点击的marker的id,遍历所有的marker,将除了当前点击的marker以外的其他marker的尺寸恢复原来大小,并将当前点击的marker的尺寸变大,同时将地图中心位置设置为该marker的位置。最后更新markers数据即可。
阅读全文