小程序地图上marker点击后改变尺寸并且将上个点击过的marker恢复原来大小,并将地图中心位置以该MARKER为中心
时间: 2024-04-29 22:25:24 浏览: 4
可以使用小程序地图组件的markerTap事件和map组件的方法来实现:
1. 在地图组件中设置markerTap事件,当点击marker时触发该事件。
2. 在事件处理函数中,获取当前点击的marker的id和位置信息。
3. 遍历所有的marker,将除当前点击的marker外的所有marker的大小设置为原来的大小。
4. 将当前点击的marker的大小设置为放大后的大小。
5. 调用map组件的方法,将地图中心位置以当前点击的marker为中心。
以下是示例代码:
```html
<map id="myMap" markers="{{markers}}" bindmarkertap="markerTap"></map>
```
```js
Page({
data: {
markers: [
{
id: 1,
latitude: 39.91488,
longitude: 116.403875,
width: 30,
height: 30,
},
{
id: 2,
latitude: 39.915176,
longitude: 116.403912,
width: 30,
height: 30,
},
{
id: 3,
latitude: 39.914558,
longitude: 116.404008,
width: 30,
height: 30,
},
],
selectedMarkerId: null, // 记录上一个选中的marker的id
markerSize: {
normal: { // 正常大小
width: 30,
height: 30,
},
selected: { // 选中后放大的大小
width: 40,
height: 40,
},
},
},
markerTap(e) {
const { markerId, latitude, longitude } = e.detail; // 获取当前点击的marker的id和位置信息
const { markers, selectedMarkerId, markerSize } = this.data;
// 遍历所有的marker,将除当前点击的marker外的所有marker的大小设置为原来的大小
for (let i = 0; i < markers.length; i++) {
if (markers[i].id === markerId) {
markers[i].width = markerSize.selected.width;
markers[i].height = markerSize.selected.height;
} else {
markers[i].width = markerSize.normal.width;
markers[i].height = markerSize.normal.height;
}
}
// 更新数据,将当前点击的marker的id记录下来
this.setData({
markers,
selectedMarkerId: markerId,
});
// 将地图中心位置以当前点击的marker为中心
this.mapCtx = wx.createMapContext('myMap');
this.mapCtx.moveToLocation({
latitude,
longitude,
});
},
});
```