小程序地图上marker点击后改变尺寸并且将上个点击过的其他分类下的marker也恢复原来大小,并将地图中心位置以该MARKER为中心
时间: 2024-06-11 16:09:40 浏览: 213
可以通过以下步骤实现:
1. 在marker的点击事件中,获取当前点击的marker对象和分类信息。
2. 遍历地图上所有marker,如果该marker不属于当前分类,则将其恢复原来的大小。
3. 将当前点击的marker放大,并将地图中心位置设置为该marker的位置。
下面是一个示例代码:
```javascript
// 定义marker的初始和放大的icon
var normalIcon = {
width: 20,
height: 30,
iconPath: '/images/normal.png'
};
var selectedIcon = {
width: 30,
height: 45,
iconPath: '/images/selected.png'
};
Page({
data: {
markers: [], // 存储所有marker的数组
selectedMarkerId: null // 存储上一个选中的marker的id
},
onLoad: function() {
// 初始化地图和markers
this.mapCtx = wx.createMapContext('myMap');
this.initMarkers();
},
// 初始化markers
initMarkers: function() {
// 获取所有marker的信息
var markers = [
{ id: 1, latitude: 39.90469, longitude: 116.40717, category: 'A' },
{ id: 2, latitude: 39.91469, longitude: 116.41717, category: 'A' },
{ id: 3, latitude: 39.92469, longitude: 116.42717, category: 'B' },
{ id: 4, latitude: 39.93469, longitude: 116.43717, category: 'B' },
{ id: 5, latitude: 39.94469, longitude: 116.44717, category: 'C' },
{ id: 6, latitude: 39.95469, longitude: 116.45717, category: 'C' }
];
// 将marker的icon设置为初始icon,并添加到地图上
markers.forEach(marker => {
marker.icon = normalIcon;
});
this.setData({
markers: markers
});
},
// marker点击事件
markerTap: function(e) {
var markerId = e.markerId;
var category = e.markerId.category;
// 将之前选中的marker恢复原来的大小
if (this.data.selectedMarkerId) {
var markers = this.data.markers.map(marker => {
if (marker.id === this.data.selectedMarkerId) {
marker.icon = normalIcon;
}
return marker;
});
this.setData({
markers: markers
});
}
// 将当前选中的marker放大
var markers = this.data.markers.map(marker => {
if (marker.id === markerId) {
marker.icon = selectedIcon;
}
return marker;
});
this.setData({
markers: markers,
selectedMarkerId: markerId
});
// 将地图中心位置设置为该marker的位置
this.mapCtx.moveToLocation({
latitude: e.latitude,
longitude: e.longitude
});
}
});
```
在上面的示例代码中,我们使用了`setData`方法来更新marker的icon和存储上一个选中的marker的id。在`markerTap`方法中,我们首先将之前选中的marker恢复原来的大小,然后将当前选中的marker放大,并将地图中心位置设置为该marker的位置。
阅读全文