小程序云开发地图上marker点击后改变尺寸并且将上个点击过的包括其他分类下的marker恢复原来大小,并将地图中心位置以该MARKER为中心
时间: 2024-05-05 15:16:19 浏览: 73
微信小程序开发mapdemo,地图导航、marker标注源码.zip
可以使用地图的事件监听函数来实现marker点击后的尺寸变化和地图中心位置的改变。具体实现步骤如下:
1. 在页面的onLoad函数中初始化地图,并为地图绑定点击事件监听函数。
```javascript
Page({
onLoad: function () {
wx.cloud.init()
this.mapCtx = wx.createMapContext('map')
this.mapCtx.on('tap', this.handleMapTap)
},
// ...
})
```
2. 在handleMapTap函数中获取当前点击的marker的信息,并根据该marker的分类信息更新marker的尺寸。
```javascript
handleMapTap(e) {
const { markers } = this.data
const { markerId } = e
const clickedMarker = markers.find(marker => marker.id === markerId)
// 将上一个点击过的marker大小恢复为原来的大小
markers.forEach(marker => {
if (marker.id !== markerId && marker.category === clickedMarker.category) {
marker.width = 30
marker.height = 30
}
})
// 更新当前点击的marker的大小,并将地图中心位置移动到该marker的位置
clickedMarker.width = 40
clickedMarker.height = 40
this.setData({
markers,
latitude: clickedMarker.latitude,
longitude: clickedMarker.longitude,
})
}
```
3. 在页面的onReady函数中获取所有的marker信息,并为每个marker设置一个唯一的id。
```javascript
Page({
onReady: function () {
const { markers } = this.data
markers.forEach((marker, index) => {
marker.id = `marker-${index}`
})
this.setData({
markers,
})
},
// ...
})
```
4. 在WXML模板中使用wx:for循环渲染所有的marker,并为每个marker绑定点击事件。
```html
<map id="map" latitude="{{ latitude }}" longitude="{{ longitude }}" markers="{{ markers }}" bindmarkertap="handleMarkerTap"></map>
```
5. 在handleMarkerTap函数中获取当前点击的marker的id,并通过marker的id来触发地图的tap事件。
```javascript
handleMarkerTap(e) {
const { markerId } = e
this.mapCtx.tap({
markerId,
})
}
```
这样就可以实现marker点击后的尺寸变化和地图中心位置的改变了。
阅读全文