小程序地图上marker点击后改变尺寸并且将上个点击过的marker恢复原来大小,并将地图中心位置以该MARKER为中心
时间: 2024-06-11 15:09:36 浏览: 40
可以通过以下步骤实现:
1. 在地图上添加marker,并为每个marker添加点击事件监听器。
2. 在点击事件监听器中,获取当前点击的marker对象,并将其尺寸改变。
3. 获取上一个被点击的marker对象(可以通过全局变量保存上一个点击的marker),并将其尺寸恢复原来大小。
4. 将地图中心位置以当前点击的marker为中心,使用地图的setCenter方法实现。
下面是示例代码:
```
// 全局变量,保存上一个点击的marker对象
var lastMarker = null;
// 在地图上添加marker,并为每个marker添加点击事件监听器
var markers = [
{
id: 1,
latitude: 39.90469,
longitude: 116.40717,
width: 20,
height: 20
},
{
id: 2,
latitude: 31.23039,
longitude: 121.4737,
width: 20,
height: 20
}
];
markers.forEach(function(marker) {
// 添加marker
wx.addMarker({
id: marker.id,
latitude: marker.latitude,
longitude: marker.longitude,
width: marker.width,
height: marker.height
});
// 为marker添加点击事件监听器
wx.onMarkerTap(function(event) {
// 获取当前点击的marker对象
var currentMarker = markers.find(function(marker) {
return marker.id === event.markerId;
});
// 将当前点击的marker尺寸改变
wx.modifyMarker({
id: event.markerId,
width: currentMarker.width * 2,
height: currentMarker.height * 2
});
// 将上一个点击的marker尺寸恢复原来大小
if (lastMarker && lastMarker.id !== currentMarker.id) {
wx.modifyMarker({
id: lastMarker.id,
width: lastMarker.width,
height: lastMarker.height
});
}
// 保存当前点击的marker对象为上一个点击的marker
lastMarker = currentMarker;
// 将地图中心位置以当前点击的marker为中心
wx.setCenter({
latitude: currentMarker.latitude,
longitude: currentMarker.longitude
});
});
});
```
注意:以上代码仅为示例,实际应用中需要根据具体情况进行调整和优化。
阅读全文