uniapp微信小程序地图实现绘制polygon（保姆级教程 全网最全！！！）

已于 2023-12-01 16:32:05 修改
阅读量4.1k 收藏 31
点赞数 45
分类专栏： 微信小程序 uniapp 文章标签： uni-app 微信小程序 前端
于 2023-12-01 16:24:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43080548/article/details/134737238
版权

用户需求：需要在填写表单信息时，在地图上标绘自己房屋的位置信息。

这个问题处理了很久，在网上也没有找到全面的相关案例，所以我将我的思路分享给大家，希望可以解决大家遇到的问题。如果大家有更好的思路，欢迎评论区留言，大家一起学习，共同进步！

实现最终界面：

由于我上一次写过一篇关于在uniapp微信小程序上如何加载控件的文章，在这里我不在赘述，大家可以先看这一篇：uniapp微信小程序实现地图展示控件

关于绘制面的知识点，我将分为以下几点为大家讲解：

目录

一、创建context 对象

二、开始绘制面图层

1.使用地图的tap点击事件，获取当前点击位置的坐标点

2.使用polyline将两个点连接成线

3.获取点击地图的双击事件，双击后结束标绘

一、创建context 对象

在页面加载的时候，创建map对象

onLoad(data) {
    this.initMap();
},
methods:{
    initMap(){
        this.mapCtx = wx.createMapContext('mymap');
       },
}

设置加载地图的中心点和缩放等级

<map id="mymap" class="myMap_map" @tap="mapAction" :longitude="mapData.longitude" :latitude="mapData.latitude" :scale="mapData.scale">
    <cover-view class="myMap_map__cover-view">
    	<cover-view class="myMap_map__cover-view_mapControls">
    		<!-- 显示绘制的控件-->
    		<cover-view class="myMap_map__cover-view_mapControls_drawControl" @click="drawPolygon">
    			<cover-image class="myMap_map__cover-view_mapControls_drawControl_drawicon" :src="mapData.drawIconPath"></cover-image>
    			<cover-view class="myMap_map__cover-view_mapControls_drawControl_drawText">标绘位置</cover-view>
    		</cover-view>
    	</cover-view>
    </cover-view>
</map>

在data中声明变量

// 地图的相关操作
mapData:{
	//设置地图中心点 lon经度y、lat纬度x
	longitude:'119.965238',
	latitude:'35.916325',
	scale:18,
	polygon:[],
	marker:[],
	
},

二、开始绘制面图层

绘制面数据需要先明白，polygon是由多个点绘制而成的。也就是说我们需要先获取在地图上点击的point，将这个数据存储起来。

我的实现思路是点击标绘位置之后开始在地图上绘制，点击地图获取在地图上的定位点，存储这些定位点，最后结束的时候，需要双击地图。然后将point数据组赋值给polygon，生成一个polygon数据。在这里需要注意：用户点击两个点的时候，需要将这两个点进行连接，成poline，所以地图上需要加载point、poline和polygon。

1.使用地图的tap点击事件，获取当前点击位置的坐标点

这里我用了一个变量做判断，点击标绘位置的时候，说明开始标绘，这个时候我再点击地图，获取定位点的坐标，然后push到markers数组中。

HTML部分：

<!-- 展示地图信息  标绘位置情况 -->
<view class="myMap">
    <u-divider text="地图展示"></u-divider>
    <map id="mymap" class="myMap_map" @tap="mapAction" :longitude="mapData.longitude" :latitude="mapData.latitude" :scale="mapData.scale" :polygons="mapData.polygons"
        :markers="mapData.markers">
        <cover-view class="myMap_map__cover-view">
	    <cover-view class="myMap_map__cover-view_mapControls">
		<!-- 显示绘制的控件-->
		<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">
			<cover-image class="myMap_map__cover-view_mapControls_drawControl_drawicon" :src="item.icon"></cover-image>
			<cover-view class="myMap_map__cover-view_mapControls_drawControl_drawText">{{ item.label }}</cover-view>
		</cover-view>
	    </cover-view>
        </cover-view>
    </map>
</view>

data变量：

data(){
    return{
    // 地图的相关操作
        mapData:{
        	//设置地图中心点 lon经度y、lat纬度x
        	longitude:'119.965238',
        	latitude:'35.916325',
        	infowidth:6,
        	infoheight:6,
        	scale:18,
        	markers:[],
        	polyline:[],
        	polygons:[],
        	
        },
    //地图控件
        mapControls:[
        	// 标绘位置
        	{
        		id:'drawPolygon',
        		check:false,
        		icon:'/static/mapview/drawIcon.png',
        		method:'drawPolygons',
        		label:'标绘位置'
        	},
        	//清除
        	{
        		id:'cleanPolygon',
        		check:false,
        		icon:'/static/mapview/cleanPolygon.png',
        		method:'cleanPolygons',
        		label:'清除'
        	}
        ],
    }
}

methods方法

mapEdit(item){
    item.check = !item.check;
    switch(item.id){
    	// 绘制面
    	case 'drawPolygon':
    		this.drawPolygons();
    		break;
    	//清除
    	case 'cleanPolygon':
    		this.cleanPolygons();
    		break;
    	default:
    		break;
    }
},
//绘制面
drawPolygons(){
    uni.$u.toast('点击地图开始绘制！');
},
cleanPolygons(){
    uni.$u.toast('清除')
},
//点击地图事件
mapAction(e){
    //判断是否已经点击标绘位置，如果点击标绘位置后开始定位
    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
    	})
    }
},

写到此处，地图上已经实现可以标记点位信息

下边我们需要实现当用户点击两个点的时候，让这两个点连成线。

2.使用polyline将两个点连接成线

需要判断当marker数组中的长度大于等于2的时候，才开始生成线段

//点击地图事件
mapAction(e){
    //判断是否已经点击标绘位置，如果点击标绘位置后开始定位
    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:3,
    		})
    	}
    	console.log(this.mapData.polyline)
    }
},

此时，polyline数组中的存储结构是这样的

每两个点组成一条线段，界面中一共是三条线段。

3.获取点击地图的双击事件，双击后结束标绘

在这里我们需要注意，两个点形成一条线，而三条线段才能形成一个polygon，所以我们需要先判断polyline的长度必须要大于等于3，才能结束标绘。

由于我并没有再官网上找到地图的双击事件，所以在这里我模拟了地图的双击事件。通过两次单击事件的时间差来判断。

首先，需要在data中定义两个变量存储点击的时间

//单击事件时间差
taptimestame:{
	firsttime:null,
	lasttime:null
},

然后在单击地图的方法中进行时间的存储与判断

//点击地图事件
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:3,
    		})
    		
    		if(this.mapData.polyline.length >=3){
    			//判断两次单击事件的时间差
    			if(this.taptimestame.lasttime - this.taptimestame.firsttime < 500){
    				uni.$u.toast('这是个双击事件')
    			}
    			
    		}
    	}
    }
},

目前实现效果：

最后，在双击事件中，新增polygon面图层，如果不需要的话可以将点和线的数据进行清空操作

//点击地图事件
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:2,
    		})
    		
    		if(this.mapData.polyline.length >=3){
    			//判断两次单击事件的时间差
    			if(this.taptimestame.lasttime - this.taptimestame.firsttime < 500){
    				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:2,
    					strokeColor:'#00AF99',
    					fillColor:'#00AF9930'
    				})
    				
    				//最后将点、线段的数据清空
    				this.mapData.markers = [];
    				this.mapData.polyline = [];
    				this.mapControls[0].check = false;
    			}
    			
    		}
    	}
    }
},

最终实现效果：

最后：这里有个bug哦，最后双击的时候会触发地图等级别缩放。这个地方需要判断以下，如果用户正在标绘位置，可以把这个事件禁用掉。

写到最后，如果大家觉得写的不错，一键三连白，点赞、收藏加关注。大家的点赞就是我不断分享的动力！！！

神仙姐姐QAQ
关注
  • 45
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
UniPolygon：通用多边形
04-11
本文提出了通用多边形UniPolygon图的实现。 在WPF和Silverlight中，构建用户界面的丰富图形变得更加容易。
微信小程序城市范围画线
01-03
微信小程序城市范围画线 用的微信小程序原生的map组件多边形polygons 将传入的经纬度连接起来 参数： points：经纬度数组 array [{latitude: 0, longitude: 0}] 城市边框经纬度 strokeWidth：描边的宽度 number strokeColor：描边的颜色 string 十六进制 fillColor：填充颜色 string 十六进制 十六进制透明度对照表 zIndex：设置多边形Z轴数值 number ``` ```javascript polygon:[{ //此处为北京区属周边数组 其他城市或精确到区级请去“http
【uniapp小程序实战】—— 使用腾讯地图获取定位_uniapp 腾讯地图(2)
2401_84931310的博客
05-13 547
以上内容为搬运过来的，详情可点击链接跳转至官网。
微信小程序地图制作
08-19
微信小程序地图制作 小程序开发 地图制作，源码下载 ，
uniapp微信小程序map组件polygons自定义扇形覆盖物
YX_0719的博客
12-11 1210
微信小程序uniapp腾讯地图自定义扇形覆盖物
uniapp地图电子围栏（多边形）绘制和编辑
最新发布
abs625的博客
05-15 815
uniapp电子围栏绘制和编辑
uniapp微信小程序地图中叠加polygon
逆水行舟 不进则退
07-23 2671
uniapp微信小程序地图中叠加展示polygon。
微信小程序地图点击设置范围并创建区域蒙层
weixin_53002680的博客
07-11 2428
微信小程序用户点击地图，创建marker并且连接marker绘制出一块区域。
微信小程序开发学习之--地图绘制行政区域图
浮萍的博客
07-31 2707
不知道大家有没有感觉就是在做微信小程序地图功能时刚刚接触时候真的感觉好迷茫呀，文档看不懂，资料找不到，就很难受呀，比如我现在的功能就想想绘制出一个区域的轮廓图，主要是为了显眼，效果图如下：就是绘画出北京的轮廓图，蛋黄酥一样的这块。说清楚了我功能之后就开始说怎么实现了（源码码估计会放在程序的最后一段）。1.首先查看官方文档（点进去看就可以了好多配置，不一一细说）微信小程序地图开发文档2.看了官方文档后我还是不知道怎么弄，但是我确定用“polygon”这个东西来绘画出轮廓，这个参数大概的意思就是指定一系列坐标点
uniapp地图开发（APP，H5）
abs625的博客
12-19 1539
uniapp 中地图开发
uniapp开发小程序-地图选择定位（报错：wx.chooseLocation need to be declared in the requiredPrivateInfos field in ）
weixin_48596030的博客
06-30 1789
/ 如果用uni.chooseLocation没有获取到地理位置，则需要获取当前的授权信息，判断是否有地理授权信息。// 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息。// 如果用户同意授权地理信息，则打开授权设置页面，判断用户的操作。// 授权成功后，然后再次chooseLocation获取信息。'需要获取您的地理位置，请确认授权，否则地图功能将无法使用'// 如果用户授权了地理信息在，则提示授权成功。//定位选择详细地址。'是否授权当前位置''调用授权窗口失败'
微信小程序地图map使用demoMapDemo-master.zip
09-25
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，提供丰富的API接口，使得开发者可以创建出交互性强、用户体验良好的应用。在这个"微信小程序地图map使用demoMapDemo-master.zip"压缩包中...
微信小程序-悬赏求助的小程序Demo源码
05-14
3. **地图组件**：`<map>`组件允许开发者在小程序内嵌入地图，通过设置`longitude`和`latitude`属性显示中心点，`markers`属性可以添加标记，`polyline`或`polygon`则可以绘制路径或区域。 4. **悬赏任务管理**：在...
小程序地图定位微信小程序源码（含截图）.rar
04-09
【标题】中的“小程序地图定位微信小程序源码（含截图）”表明这是一个关于微信小程序开发的项目，重点在于实现地图定位功能。这个源码可能包含了完整的代码结构、配置文件以及相关的截图，帮助开发者理解并实现类似...
微信小程序测量程序计算三角形多边形面积计算坐标正反算
08-10
微信小程序是一种轻量级的应用开发平台，主要应用于移动端，它基于JavaScript、WXML（微信小程序标记语言）和WXSS（微信小程序样式语言）构建。在本项目中，“微信小程序测量程序计算”涉及到的核心知识点主要是几何...
uniapp开发的App中使用高德地图
热门推荐
m0_57442975的博客
09-28 1万+
map地图在不同的开发场景使用不同，这里主要是uniapp开发的Android软件中关于高德地图使用的一些项目记录。
uniapp微信小程序解决绘制polygon结束时的问题
逆水行舟 不进则退
12-04 735
uniapp微信小程序在手机端地图上实现绘制面图层时，双击结束绘制存在bug，那就换个思路，使用一种更好的思路解决吧
uniapp开发小程序解析经纬度获取当前位置信息（腾讯地图二）
weixin_53339757的博客
03-27 6650
uniapp开发小程序解析经纬度换取详细中文地址
Uniapp零基础开发学习笔记(10) -地图组件的使用
qq_43662503的博客
10-27 1124
地图组件的使用，原教程学习同时避坑
在微信小程序里面，用腾讯地图画一个电子围栏，并且判断本人坐标是否在电子围栏里面，如果没有则报警。
05-24
要实现这个功能，你需要先获取用户的地理位置信息，并且在地图上绘制电子围栏。使用腾讯地图 API 可以轻松实现这一步骤。接下来，你可以使用 JavaScript 中的 `isPointInPath()` 方法检查用户的位置是否在电子围栏内。 具体实现步骤如下： 1. 在小程序页面中引入腾讯地图 API，如下所示： ```javascript var QQMapWX = require('../../libs/qqmap-wx-jssdk.js'); var qqmapsdk; ``` 2. 初始化地图 API，如下所示： ```javascript Page({ data: { latitude: 0, longitude: 0, markers: [], polygon: [] }, onLoad: function () { // 初始化地图 API qqmapsdk = new QQMapWX({ key: '你的腾讯地图 API Key' }); } }); ``` 3. 获取用户的地理位置信息，并且绘制地图和电子围栏，如下所示： ```javascript Page({ data: { latitude: 0, longitude: 0, markers: [], polygon: [] }, onLoad: function () { // 初始化地图 API qqmapsdk = new QQMapWX({ key: '你的腾讯地图 API Key' }); // 获取用户的地理位置信息 wx.getLocation({ type: 'gcj02', success: res => { const latitude = res.latitude; const longitude = res.longitude; // 在地图上显示用户的位置 const markers = [{ id: 0, latitude: latitude, longitude: longitude, iconPath: '/images/location.png', width: 50, height: 50 }]; this.setData({ latitude: latitude, longitude: longitude, markers: markers }); // 绘制电子围栏 qqmapsdk.reverseGeocoder({ location: { latitude: latitude, longitude: longitude }, success: res => { const city = res.result.ad_info.city; const polygon = [{ points: [ { latitude: 39.984702, longitude: 116.318417 }, { latitude: 39.984683, longitude: 116.321956 }, { latitude: 39.981026, longitude: 116.322020 }, { latitude: 39.981012, longitude: 116.318385 } ], strokeColor: "#FF0000", fillColor: "#FF0000", strokeWidth: 2, zIndex: -1 }]; this.setData({ polygon: polygon }); }, fail: function(res) { wx.showToast({ title: '获取地理位置失败', icon: 'none' }) } }); }, fail: function(res) { wx.showToast({ title: '获取地理位置失败', icon: 'none' }) } }) } }); ``` 在上面的代码中，我们使用 `wx.getLocation()` 方法获取用户的地理位置信息。然后，在地图上显示用户的位置，并且绘制一个四边形作为电子围栏。 4. 检查用户的位置是否在电子围栏内，并且报警，如下所示： ```javascript Page({ data: { latitude: 0, longitude: 0, markers: [], polygon: [] }, onLoad: function () { // 初始化地图 API qqmapsdk = new QQMapWX({ key: '你的腾讯地图 API Key' }); // 获取用户的地理位置信息 wx.getLocation({ type: 'gcj02', success: res => { const latitude = res.latitude; const longitude = res.longitude; // 在地图上显示用户的位置 const markers = [{ id: 0, latitude: latitude, longitude: longitude, iconPath: '/images/location.png', width: 50, height: 50 }]; this.setData({ latitude: latitude, longitude: longitude, markers: markers }); // 绘制电子围栏 qqmapsdk.reverseGeocoder({ location: { latitude: latitude, longitude: longitude }, success: res => { const city = res.result.ad_info.city; const polygon = [{ points: [ { latitude: 39.984702, longitude: 116.318417 }, { latitude: 39.984683, longitude: 116.321956 }, { latitude: 39.981026, longitude: 116.322020 }, { latitude: 39.981012, longitude: 116.318385 } ], strokeColor: "#FF0000", fillColor: "#FF0000", strokeWidth: 2, zIndex: -1 }]; this.setData({ polygon: polygon }); // 检查用户的位置是否在电子围栏内 const context = wx.createCanvasContext('canvas'); context.beginPath(); context.moveTo(polygon[0].points[0].latitude, polygon[0].points[0].longitude); for (let i = 1; i < polygon[0].points.length; i++) { context.lineTo(polygon[0].points[i].latitude, polygon[0].points[i].longitude); } context.closePath(); context.stroke(); context.fill(); context.beginPath(); context.arc(latitude, longitude, 5, 0, 2 * Math.PI); context.closePath(); context.stroke(); context.fill(); context.draw(false, () => { wx.canvasGetImageData({ canvasId: 'canvas', x: 0, y: 0, width: 1, height: 1, success: res => { const data = res.data; if (data[0] === 255 && data[1] === 0 && data[2] === 0) { // 用户的位置在电子围栏内 console.log('用户的位置在电子围栏内'); } else { // 用户的位置不在电子围栏内，报警 console.log('用户的位置不在电子围栏内，报警'); } }, fail: function(res) { wx.showToast({ title: '获取像素点失败', icon: 'none' }) } }) }); }, fail: function(res) { wx.showToast({ title: '获取地理位置失败', icon: 'none' }) } }); }, fail: function(res) { wx.showToast({ title: '获取地理位置失败', icon: 'none' }) } }) } }); ``` 在上面的代码中，我们使用 `wx.createCanvasContext()` 方法创建一个画布，然后在画布上绘制电子围栏和用户的位置，最后使用 `wx.canvasGetImageData()` 方法获取画布上某个像素点的颜色值。如果这个像素点的颜色值是红色，说明用户的位置在电子围栏内，否则用户的位置不在电子围栏内，需要报警。 以上就是在微信小程序里面用腾讯地图画一个电子围栏，并且判断本人坐标是否在电子围栏里面，如果没有则报警的实现方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

神仙姐姐QAQ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值