宜昌公司做网站,it运维系统详细设计,word文档素材免费下载,驾校网站开发计划书用户需求#xff1a;需要在填写表单信息时#xff0c;在地图上标绘自己房屋的位置信息。
这个问题处理了很久#xff0c;在网上也没有找到全面的相关案例#xff0c;所以我将我的思路分享给大家#xff0c;希望可以解决大家遇到的问题。如果大家有更好的思路#xff0c;…用户需求需要在填写表单信息时在地图上标绘自己房屋的位置信息。
这个问题处理了很久在网上也没有找到全面的相关案例所以我将我的思路分享给大家希望可以解决大家遇到的问题。如果大家有更好的思路欢迎评论区留言大家一起学习共同进步
实现最终界面 由于我上一次写过一篇关于在uniapp微信小程序上如何加载控件的文章在这里我不在赘述大家可以先看这一篇uniapp微信小程序实现地图展示控件
关于绘制面的知识点我将分为以下几点为大家讲解
目录
一、创建context 对象
二、开始绘制面图层
1.使用地图的tap点击事件获取当前点击位置的坐标点
2.使用polyline将两个点连接成线
3.获取点击地图的双击事件双击后结束标绘 一、创建context 对象
在页面加载的时候创建map对象 onLoad(data) {this.initMap();
},
methods:{initMap(){this.mapCtx wx.createMapContext(mymap);},
}
设置加载地图的中心点和缩放等级 map idmymap classmyMap_map tapmapAction :longitudemapData.longitude :latitudemapData.latitude :scalemapData.scalecover-view classmyMap_map__cover-viewcover-view classmyMap_map__cover-view_mapControls!-- 显示绘制的控件--cover-view classmyMap_map__cover-view_mapControls_drawControl clickdrawPolygoncover-image classmyMap_map__cover-view_mapControls_drawControl_drawicon :srcmapData.drawIconPath/cover-imagecover-view classmyMap_map__cover-view_mapControls_drawControl_drawText标绘位置/cover-view/cover-view/cover-view/cover-view
/map
在data中声明变量
// 地图的相关操作
mapData:{//设置地图中心点 lon经度y、lat纬度xlongitude:119.965238,latitude:35.916325,scale:18,polygon:[],marker:[],},
二、开始绘制面图层
绘制面数据需要先明白polygon是由多个点绘制而成的。也就是说我们需要先获取在地图上点击的point将这个数据存储起来。
我的实现思路是点击标绘位置之后开始在地图上绘制点击地图获取在地图上的定位点存储这些定位点最后结束的时候需要双击地图。然后将point数据组赋值给polygon生成一个polygon数据。在这里需要注意用户点击两个点的时候需要将这两个点进行连接成poline所以地图上需要加载point、poline和polygon。
1.使用地图的tap点击事件获取当前点击位置的坐标点
这里我用了一个变量做判断点击标绘位置的时候说明开始标绘这个时候我再点击地图获取定位点的坐标然后push到markers数组中。
HTML部分
!-- 展示地图信息 标绘位置情况 --
view classmyMapu-divider text地图展示/u-dividermap idmymap classmyMap_map tapmapAction :longitudemapData.longitude :latitudemapData.latitude :scalemapData.scale :polygonsmapData.polygons:markersmapData.markerscover-view classmyMap_map__cover-viewcover-view classmyMap_map__cover-view_mapControls!-- 显示绘制的控件--cover-view classmyMap_map__cover-view_mapControls_drawControl :classitem.check ? myMap_map__cover-view_mapControls_checkdrawControl : clickmapEdit(item) v-for(item,index) in mapControls :keyindexcover-image classmyMap_map__cover-view_mapControls_drawControl_drawicon :srcitem.icon/cover-imagecover-view classmyMap_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纬度xlongitude: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.length1,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.length1,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 i0;ithis.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.length1,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 i0;ithis.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.length1,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 i0;ithis.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 [];//在双击事件中 生成polygonfor(let i0;ithis.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哦最后双击的时候会触发地图等级别缩放。这个地方需要判断以下如果用户正在标绘位置可以把这个事件禁用掉。 写到最后如果大家觉得写的不错一键三连白点赞、收藏加关注。大家的点赞就是我不断分享的动力
