中国手机网站大全,济南工装定制公司,万网如何做网站,个人网站设计结构图正常情况下是没有手机上画电子围栏的#xff0c;公共平台上我也没找到#xff0c;所以走了一个歪点子#xff0c;就是给地图添加点击事件#xff0c;记录点的位置#xff0c;在画到电子围栏上就是添加电子围栏了#xff0c;如果只是显示电子围栏就简单了
一、多边形电子…正常情况下是没有手机上画电子围栏的公共平台上我也没找到所以走了一个歪点子就是给地图添加点击事件记录点的位置在画到电子围栏上就是添加电子围栏了如果只是显示电子围栏就简单了
一、多边形电子围栏 viewmap idmap longitude{{longitude}} latitude{{latitude}} scale13 bindtapbindtapMap markers{{markers}} polyline{{polyline}} polygons{{polygons}} show-location stylewidth: 100%; height: 80vh;/mapbutton typeprimary bindtapremovePolygons删除围栏/button
/view 字段说明
bindtapMap地图点击方法
creatPolygons点图围栏绘制方法
markers显示位置点
polygons连线位置点 Page({data: {latitude: 24.463713,longitude: 118.082085,markers: [],polygons: [],},creatPolygons() {//创建多边形围栏if (this.data.markers.length 3){return}let polygons this.data.polygons;let markers this.data.markers;let newArray [];let params {fillColor: #1791fc66,strokeColor: #FFF,strokeWidth: 2,zIndex: 3}for (let j 0; j markers.length; j) {let obj {latitude: markers[j].latitude,longitude: markers[j].longitude};newArray.push(obj);}polygons[0] {};polygons[0].points newArray;newArray Object.assign(polygons[0], params);this.setData({polygons[0]: newArray})},bindtapMap(e) {//创建标记点let tapPoint e.detail;let markers this.data.markerslet newContent markers.lengthlet markerItem {id: newContent,latitude: null,longitude: null,iconPath: ../img/point.png,width: 34px,height: 34px,rotate: 0,alpha: 1,zIndex: 3}markerItem.latitude tapPoint.latitude;markerItem.longitude tapPoint.longitude;markers.push(markerItem)this.setData({markers})this.creatPolygons()},removePolygons() {//删除围栏和标记this.setData({markers: [],polygons: []})},})
二、圆形电子围栏 viewmap bindtapbindtapMap markers{{markers}} idmap longitude{{longitude}} latitude{{latitude}} scale13 circles{{circles}} stylewidth: 100%; height: 80vh;/mapbutton typeprimary bindtapremovePolygons删除围栏/button
/view
字段说明bindtapMap标记位置点。这和多边形就不一样了我只需要两个点第一个点为圆形的中心第二个点则为圆形的边
distance计算第一个点和第一个点的距离以米为单位如果要千米就 /1000
markers位置点显示
circles圆形围栏显示
Page({data: {latitude:39.90923,longitude: 116.397428,markers: [],circles: [],},removePolygons() {//删除围栏和标记this.setData({markers: [],circles: []})},bindtapMap(e) {//创建标记点let tapPoint e.detail;let markers this.data.markerslet newContent markers.lengthlet markerItem {id: newContent,latitude: null,longitude: null,iconPath: ../img/point.png,width: 34px,height: 34px,rotate: 0,alpha: 1,zIndex: 3}markerItem.latitude tapPoint.latitude;markerItem.longitude tapPoint.longitude;if (markers.length 0) {markers.push(markerItem)this.setData({markers})} else {console.log(this.distance(markers[0].latitude,markers[0].longitude,markerItem.latitude,markerItem.longitude))this.setData({circles: [{latitude: markers[0].latitude,longitude: markers[0].longitude,fillColor: #7cb5ec88,color: #FF0000DD,radius: this.distance(markers[0].latitude,markers[0].longitude,markerItem.latitude,markerItem.longitude),}],})}},distance(la1, lo1, la2, lo2) {var La1 la1 * Math.PI / 180.0;var La2 la2 * Math.PI / 180.0;var La3 La1 - La2;var Lb3 lo1 * Math.PI / 180.0 - lo2 * Math.PI / 180.0;var s 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)));s s * 6378.137;s Math.round(s * 1000);return s;},onLoad(options) {},})
所遇到的问题
1.circles内我添加level无效导致我看不到围栏下面的地图我也没解决他为啥不好使所以我就给围栏添加颜色时做了点手脚 fillColor: #7cb5ec88,color: #FF0000DD
