uniapp微信小程序解决绘制polygon结束时的问题

&lt;!-- 展示地图信息  标绘位置情况 --&gt;
&lt;view class="myMap"&gt;
    &lt;u-divider text="地图展示"&gt;&lt;/u-divider&gt;
    <map id="mymap" class="myMap_map" @tap="mapAction" :longitude="mapData.longitude" :latitude="mapData.latitude" :scale="mapData.scale" :polygons="mapData.polygons"
        :markers="mapData.markers" :polyline="mapData.polyline"&gt;
        <cover-view class="myMap_map__cover-view"&gt;
        	<cover-view class="myMap_map__cover-view_mapControls"&gt;
        		<!-- 显示绘制的控件--&gt;
        		<cover-view class="myMap_map__cover-view_mapControls_drawControl" :class="item.check ? 'myMap_map__cover-view_mapControls_checkdrawControl' : '' " @click="mapEdit(item)" v-for="(item,index) in mapControls" :key="index" v-if="item.isshow"&gt;
        			<cover-image class="myMap_map__cover-view_mapControls_drawControl_drawicon" :src="item.icon"&gt;</cover-image>
        			<cover-view class="myMap_map__cover-view_mapControls_drawControl_drawText">{{ item.label }}</cover-view>
        		</cover-view>
        	</cover-view>
        </cover-view>
    </map>
</view>

2、data 声明的工具按钮中新增结束标绘按钮

//地图控件
mapControls:[
	// 标绘位置
	{
		id:'drawPolygon',
		check:false,
		isshow:true,
		icon:'/static/mapview/drawIcon.png',
		method:'drawPolygons',
		label:'标绘位置'
	},
        // 结束标绘
	{
		id:'endDraw',
		check:false,
		isshow:false,
		icon:'/static/mapview/endDraw.png',
		method:'endDraws',
		label:'结束标绘'
	},
	// 清除
	{
		id:'cleanPolygon',
		check:false,
		isshow:true,
		icon:'/static/mapview/cleanPolygon.png',
		method:'cleanPolygons',
		label:'清除'
	}
],

3、在按钮的点击 事件中新增结束标绘的判断

mapEdit(item){
    switch(item.id){
    	// 绘制面
    	case 'drawPolygon':
    		item.check = !item.check;
    		this.drawPolygons();
    		break;
    	//结束绘制
    	case 'endDraw':
    		item.check = !item.check;
    		this.endDraws();
    		break;
    	//清除
    	case 'cleanPolygon':
    		this.cleanPolygons();
    		break;
    	default:
    		break;
    }
},

4、判断绘制的线段 个数 是否大于等于三条，当满足 条件后展示结束标绘按钮

//点击地图事件
mapAction(e){
    if(this.taptimestame.firsttime == null){
    	//第一次定位，给firsttime赋值
    	this.taptimestame.firsttime = e.timeStamp;
    }else if(this.taptimestame.lasttime == null){
    	//第二次定位，给lasttime赋值
    	this.taptimestame.lasttime = e.timeStamp;
    }else{
    	this.taptimestame.firsttime = this.taptimestame.lasttime;
    	this.taptimestame.lasttime = e.timeStamp;
    }
    //判断是否已经点击标绘位置，如果点击标绘位置后开始定位
    if(this.mapControls[0].check){
    	this.mapData.markers.push({
    		id:this.mapData.markers.length+1,
    		longitude:e.detail.longitude,
    		latitude:e.detail.latitude,
    		iconPath:'/static/mapview/square.png',
    		height:this.mapData.infoheight,
    		width:this.mapData.infowidth
    	})
    	if(this.mapData.markers.length >=2){
    		this.pointsData = [];
    		for(let i=0;i<this.mapData.markers.length;i++){
    			this.pointsData.push({
    				latitude:this.mapData.markers[i].latitude,
    				longitude:this.mapData.markers[i].longitude
    			})
    		}
    		this.mapData.polyline.push({
    			points:this.pointsData,
    			color:'#00AF99',
    			width:1,
    		})
    		
    		if(this.mapData.polyline.length >=3){
    			//当线段的数量为三个的时候，可以点击结束标绘 将结束标绘展示出来 
    			this.mapControls[1].isshow = true;
    		}
    	}
    }
}

5、结束标绘的事件

//结束标绘
endDraws(){
    this.pointsData = [];
    //在双击事件中 生成polygon
    for(let i=0;i<this.mapData.markers.length;i++){
    	this.pointsData.push({
    		latitude:this.mapData.markers[i].latitude,
    		longitude:this.mapData.markers[i].longitude
    	})
    }
    this.mapData.polygons.push({
    	points:this.pointsData,
    	strokeWidth:1,
    	strokeColor:'#00AF99',
    	fillColor:'#00AF9930'
    })
    
    //最后将点、线段的数据清空
    this.mapData.markers = [];
    this.mapData.polyline = [];
    this.mapControls[0].check = false;
    //隐藏结束标绘按钮
    this.mapControls[1].isshow = false;
    this.mapControls[1].check = false;
},