小程序地图上marker点击后改变尺寸并且将上个点击过的包括其他分类下的marker恢复原来大小,并将地图中心位置以该MARKER为中心
时间: 2024-05-15 07:19:13 浏览: 119
小程序地图和小程序在地图上实现多点标记
,以下是示例代码:
```
// 定义变量
var markers = []; // 所有marker的数组
var lastMarker = null; // 上一个点击的marker
// 在onLoad生命周期函数中获取所有marker并添加点击事件
onLoad: function () {
var that = this;
wx.getLocation({
type: 'gcj02',
success: function(res) {
that.setData({
latitude: res.latitude,
longitude: res.longitude
});
},
});
// 获取所有marker
wx.getStorage({
key: 'markers',
success: function(res) {
markers = res.data;
// 循环设置每个marker的点击事件
for (var i = 0; i < markers.length; i++) {
var marker = markers[i];
marker.callout = {
content: marker.name,
color: '#ffffff',
fontSize: 14,
borderRadius: 10,
bgColor: '#ff0000',
padding: 6,
display: 'ALWAYS'
};
marker.width = 30;
marker.height = 30;
marker.iconPath = '/images/marker.png';
marker.zIndex = i;
marker.alpha = 0.8;
marker.anchor = {x: 0.5, y: 1};
marker.label = {
content: marker.name,
color: '#000000',
fontSize: 14,
borderRadius: 10,
bgColor: '#ffffff',
padding: 6,
textAlign: 'center',
x: 0,
y: -38
};
marker.onTap = function(e) {
var id = e.markerId;
// 将上一个点击的marker恢复原来大小
if (lastMarker !== null && lastMarker.id !== id) {
lastMarker.width = 30;
lastMarker.height = 30;
lastMarker.zIndex = lastMarker.zIndex - 1;
lastMarker.alpha = 0.8;
markers[lastMarker.index] = lastMarker;
}
// 将当前点击的marker放大
var marker = markers[id];
marker.width = 40;
marker.height = 40;
marker.zIndex = markers.length;
marker.alpha = 1;
markers[id] = marker;
// 将上一个点击的marker保存为lastMarker
lastMarker = marker;
// 设置地图中心位置为该marker的位置
that.setData({
latitude: marker.latitude,
longitude: marker.longitude
});
// 更新markers数组
that.setData({
markers: markers
});
};
}
// 将markers数组设置到data中
that.setData({
markers: markers
});
},
});
}
```
在上面的代码中,我们定义了一个`markers`数组来保存所有的marker,以及一个`lastMarker`变量来保存上一个点击的marker。在`onLoad`生命周期函数中,我们通过`wx.getStorage`异步获取所有的marker,并将其保存到`markers`数组中。然后我们循环设置每个marker的属性,包括`callout`、`width`、`height`、`iconPath`、`zIndex`、`alpha`、`anchor`和`label`等。其中,`onTap`是每个marker的点击事件,当点击一个marker时,我们将上一个点击的marker恢复原来大小,并将当前点击的marker放大,然后将该marker的位置设置为地图中心位置,并更新`markers`数组和`lastMarker`变量。最后,我们将`markers`数组设置到`data`中,以便在地图组件中显示所有的marker。
阅读全文