微信小程序端使用map组件的polygons绘制多边形，多边形的每个点使用绿色marker标记，但是在多边形中间的点会重复出现红色的默认的marker标记，首尾两个点不会出现重复红色的marker。并且红色默认的marker无法清除。
<!--
* @UpdateTime: 2023-08-08 15:24
-->
<template>
<view class="content farmMapPicker">
<map style="width: 100vw; height: 100vh;"
id="map"
:scale="18"
enable-satellite
:markers="markers"
:polygons="polygons"
@click="tapMap"
:latitude="latitude" :longitude="longitude">
</map>
<cover-view class="fixed-cover flex-x-between">
<button class="cu-btn round lines text-green flex" @click="clearMap">清空</button>
<button class="cu-btn round bg-green text-white flex m-l-10" @click="doSubmit">确定</button>
</cover-view>
</view>
</template>
<script>
export default {
name: "farmMapPicker",
components: {},
data() {
return {
_mapContext: null,
longitude: null,
latitude: null,
mapPoints: []
}
},
computed: {
polygons () {
if (this.mapPoints.length < 3) return [];
const shape = {
strokeWidth: 2,
strokeColor: '#29c987',
fillColor: '#42b98375',
zIndex: 10,
level: 'aboveroads',
points: [...this.mapPoints]
}
return [shape];
},
markers () {
if (!this.mapPoints.length) return [];
return this.mapPoints.map(e => ({
id: Date.now(),
latitude: e.latitude,
longitude: e.longitude,
iconPath: '/static/images/point.png',
width: 30,
height: 45,
}));
}
},
onLoad() {
const eventChannel = this.getOpenerEventChannel();
eventChannel.on('acceptDataFromOpenerPage', e => {
console.log('传过来的数据：', e);
if (e) {
this.mapPoints = e;
const [longitude, latitude] = this.getAreaCenterPointer(this.mapPoints);
this.longitude = longitude;
this.latitude = latitude;
} else {
this.getCurrentLocation();
}
});
},
onReady() {
this._mapContext = uni.createMapContext('map', this);
},
methods: {
/**
* 获取当前地址
*/
getCurrentLocation () {
uni.getLocation({
type: 'gcj02',
geocode: true,
success: res => {
console.log('当前地址：', res);
const { longitude, latitude } = res;
this.longitude = longitude;
this.latitude = latitude;
},
fail: err => {
console.error('获取地址失败：', err);
}
});
},
/**
* 地图点击回调函数
* @param e
*/
tapMap (e) {
console.log('地图点击----》', e);
this.mapPoints.push(e.detail)
},
/**
* 清空地图层
*/
clearMap () {
if (this.markers) {
const ids = this.markers.map(ele => ele.id);
this._mapContext.removeMarkers({markerIds: ids})
}
this._mapContext.removeVisualLayer();
this._mapContext.removeCustomLayer();
this.mapPoints = [];
},
/**
* 确定选择的数据
*/
doSubmit () {
const eventChannel = this.getOpenerEventChannel();
eventChannel.emit('acceptDataFromOpenedPage', this.mapPoints);
uni.navigateBack();
},
/**
* 计算区域中心点经纬度
* @param list
* @returns {number[]}
*/
getAreaCenterPointer (list = []) {
if (list.length<=0) return;
const len = list.length;
// 中心点经/纬度
const longitude = list.reduce((total, item) => {
return total + item.longitude;
}, 0) / len;
const latitude = list.reduce((total, item) => {
return total + item.latitude;
}, 0) / len;
return [longitude, latitude];
}
}
}
</script>
<style lang="scss" scoped>
.fixed-cover{
position: fixed;
bottom: 30rpx;
left: 20rpx;
right: 20rpx;
z-index: 10;
background-color: #fff;
border-radius: 60rpx;
padding: 20rpx;
}
</style>
