微信小程序中的MAP地图可以实现标记多个位置的功能。以下是实现该功能的步骤和代码:
1. 首先,在小程序的页面中引入map组件,并设置地图的初始位置。
```javascript
export default {
data() {
return {
viewer: null,
position: {
latitude: 39.9042,
longitude: 116.4074,
},
icon: 'https://www.example.com/marker-icon.png',
};
},
};
```
2. 在需要标记多个位置的地方,使用`marker`组件来创建标记。每个标记都需要提供一个`position`属性,用于指定标记的位置。同时,还需要提供一个`icon`属性,用于指定标记的图标。
```javascript
- {{ item }}
export default {
data() {
return {
markers: [],
};
},
methods: {
addMarker() {
const newMarker = {
position: {
latitude: 39.9042,
longitude: 116.4074,
},
icon: 'https://www.example.com/marker-icon.png',
};
this.markers.push(newMarker);
},
removeMarker(index) {
this.markers.splice(index, 1);
},
},
};
```
3. 在页面的样式文件中,为标记设置样式。可以使用`style`属性来定义标记的颜色、大小等样式。
```css
.marker {
width: 50px;
height: 50px;
background-color: #fff;
border-radius: 50%;
}
```
4. 最后,运行小程序,点击“添加标记”按钮,即可在地图上添加标记。点击“移除标记”按钮,可以删除当前选中的标记。