正常情况下是没有手机上画电子围栏的,公共平台上我也没找到,所以走了一个歪点子,就是给地图添加点击事件,记录点的位置,在画到电子围栏上就是添加电子围栏了,如果只是显示电子围栏就简单了
一、多边形电子围栏
<view>
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="13" bindtap="bindtapMap" markers="{{markers}}" polyline="{{polyline}}" polygons="{{polygons}}" show-location style="width: 100%; height: 80vh;">
</map>
<button type="primary" bindtap="removePolygons">删除围栏</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.markers
let newContent = markers.length
let 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: []
})
},
}
)
二、圆形电子围栏
<view>
<map bindtap="bindtapMap" markers="{{markers}}" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="13" circles="{{circles}}" style="width: 100%; height: 80vh;">
</map>
<button type="primary" bindtap="removePolygons">删除围栏</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.markers
let newContent = markers.length
let 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) {},
}
)
所遇到的问题:文章来源:https://www.toymoban.com/news/detail-636287.html
1.circles内我添加level无效,导致我看不到围栏下面的地图,我也没解决他为啥不好使,所以我就给围栏添加颜色时做了点手脚( fillColor: "#7cb5ec88",color: '#FF0000DD')文章来源地址https://www.toymoban.com/news/detail-636287.html
到了这里,关于微信小程序 地图map(电子围栏圆形和多边形)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!