微信小程序map 动态修改markers的解决方法
时间: 2023-09-24 11:02:57 浏览: 48
要动态修改微信小程序 Map 组件的 markers,可以使用 MapContext 对象的方法来实现。具体步骤如下:
1. 在页面的 wxml 文件中引入 Map 组件,并设置 mapId 属性:
```
<map id="map" mapId="myMap"></map>
```
2. 在页面的 js 文件中获取 MapContext 对象:
```
const mapContext = wx.createMapContext('myMap');
```
3. 使用 MapContext 对象的方法来动态修改 markers:
```
mapContext.getCenterLocation({
success: function(res) {
// 获取地图中心点的经纬度
const latitude = res.latitude;
const longitude = res.longitude;
// 更新 markers
mapContext.getMarkers({
success: function(res) {
const markers = res.markers;
markers.forEach(function(marker) {
marker.latitude = latitude;
marker.longitude = longitude;
});
mapContext.setMarkers({
markers: markers
});
}
});
}
});
```
在上述代码中,我们使用了 MapContext 对象的 getCenterLocation 方法来获取地图中心点的经纬度,然后使用 getMarkers 方法来获取当前的 markers,最后使用 setMarkers 方法来更新 markers。需要注意的是,setMarkers 方法只能更新 markers 数组中的数据,不能新增或删除 markers。如果需要新增或删除 markers,需要重新设置 markers 数组。