uniapp map画多边形打点连线

最新推荐文章于 2025-06-26 14:52:33 发布

Dai_代代

最新推荐文章于 2025-06-26 14:52:33 发布

阅读量3k

点赞数 4

CC 4.0 BY-SA版权

文章标签： uni-app map

本文链接：https://blog.csdn.net/qq_43024468/article/details/114320907

我是参考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 {