我是参考https://blog.csdn.net/zyj12138/article/details/112463219这个地址完成的

先看结果

代码

<map
			style="width: 750rpx; height: 100vh;"
			id="myMap"
			ref="myMap"
			:latitude="latitude"
			:longitude="longitude"
			:scale="16"
			:show-location="true"
			:enable-satellite="true"
			:polyline="markerPolyline"
			:markers="markerPoints"
			:polygon="markerPolygon"
			@tap="tapMap"
		/>


data() {
		return {
			latitude: 41.67718,
			longitude: 123.4631,
			landPoints: []
		};
	},
	onLoad() {
		uni.getLocation({
			geocode: true,
			success: res => {
				this.latitude = res.latitude;
				this.longitude = res.longitude;
			}
		});
	},
	computed: {
		markerPoints() {
			if (this.landPoints.length <= 0) {
				return [];
			}
			const len = this.landPoints.length;
			// 1.多边形区域端点
			const endPointMarkers = this.landPoints.map(item => {
				return {
					id: Math.random()
						.toString()
						.substr(2),
					width: 16,
					height: 25,
					anchorX: 0.5,
					anchorY: 0.5,
					...item
				};
			});
			// 2.多边形区域线段中心点
			let lineCenterMarkers = this.landPoints.map((item, index) => {
				// 计算线段中心点经纬度
				let currentPoint = item,
					nextPoint,
					lineCenterLongitude,
					lineCenterLatitude,
					distance;

				if (index === len - 1) {
					nextPoint = this.landPoints[0];
				} else {
					nextPoint = this.landPoints[index + 1];
				}

				lineCenterLongitude = (currentPoint.longitude + nextPoint.longitude) / 2;
				lineCenterLatitude = (currentPoint.latitude + nextPoint.latitude) / 2;
				distance = this.calculateDistance(currentPoint.longitude, currentPoint.latitude, nextPoint.longitude, nextPoint.latitude);
				//显示线中间部分xxx米距离
				return {
					id: Math.random()
						.toString()
						.substr(2),
					label: {
						content: `${distance} 米`,
						color: '#ff1166'
					},
					width: 2,
					height: 2,
					anchorX: 0.5,
					anchorY: 0.5,
					longitude: lineCenterLongitude,
					latitude: lineCenterLatitude
				};
			});
			// 区域面积
			const area = this.calculateArea(
				this.landPoints.map(item => {
					return {
						lat: item.latitude,
						lng: item.longitude
					};
				})
			);
			return [...endPointMarkers, ...lineCenterMarkers];
		},
		markerPolyline() {
			if (this.landPoints.length >= 2) {
				return [
					{
						points: [...this.landPoints, this.landPoints[0]],
						color: '#c89d66ff',
						width: 2
					}
				];
			}
			return [];
		},
		markerPolygon() {
			if (this.landPoints.length >= 3) {
				return [
					{
						points: [...this.landPoints],
						fillColor: '#c89d6633', // 填充颜色
						strokeColor: '#c89d66ff', // 边框颜色
						strokeWidth: 2
					}
				];
			}
			return [];
		}
	},
	methods:{
		tapMap(res) {
			this.landPoints.push(res.detail);
		},
		//计算长度
		calculateDistance(lng1, lat1, lng2, lat2) {
			lat1 = lat1 || 0;
			lng1 = lng1 || 0;
			lat2 = lat2 || 0;
			lng2 = lng2 || 0;

			var rad1 = (lat1 * Math.PI) / 180.0;
			var rad2 = (lat2 * Math.PI) / 180.0;
			var a = rad1 - rad2;
			var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
			var r = 6378137;
			var distance = r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) * Math.pow(Math.sin(b / 2), 2)));
			return distance.toFixed(2);
		},
		//计算面积
		calculateArea(path) {
			let radius = 6371009;
			let len = path.length;
			if (len < 3) return 0;
			let total = 0;
			let prev = path[len - 1];
			let prevTanLat = Math.tan((Math.PI / 2 - (prev.lat / 180) * Math.PI) / 2);
			let prevLng = (prev.lng / 180) * Math.PI;
			for (let i in path) {
				let tanLat = Math.tan((Math.PI / 2 - (path[i].lat / 180) * Math.PI) / 2);
				let lng = (path[i].lng / 180) * Math.PI;
				total += this.polarTriangleArea(tanLat, lng, prevTanLat, prevLng);
				prevTanLat = tanLat;
				prevLng = lng;
			}
			return Math.abs(total * (radius * radius));
		},
		// 面积辅助
		polarTriangleArea(tan1, lng1, tan2, lng2) {
			let deltaLng = lng1 - lng2;
			let t = tan1 * tan2;
			return 2 * Math.atan2(t * Math.sin(deltaLng), 1 + t * Math.cos(deltaLng));
		}
}

这是以上所有代码啦