小程序圆形电子围栏、定位、计算距离、判断围栏内外

概述

小程序地图相关demo，功能点有定位，获取用户实际位置信息，电子围栏、判断电子围栏内外、用户与目标地址距离换算。

详细

demo需求：

1.  实现电子围栏

2.  标记建筑物，计算用户距离建筑物的距离

3.  用户和建筑物要同时显示在地图上

4.  计算用户是否在电子围栏内外

演示图：

 一、实现电子围栏

1. 小程序中腾讯地图支持画圆和多边形 这里用的是polygons（多边形画的圆），直接看文档即可

2. 通过经纬度计算圆形坐标

function countCircle(t, e, i) {
    t = 2000; //半径
    e = [116.403517, 39.923995]; //坐标
    i = 73;
    for (
    var r = t / 6378137,
    n = [e[0], e[1]],
    o = [numberToRadius(n[1]), numberToRadius(n[0])],
    s = ((i = i || 73), []),
    a = 0; a < i; a++
    ) {
    var u = (2 * Math.PI * a) / i;
    var h = Math.asin(
    Math.sin(o[0]) * Math.cos(r) +
    Math.cos(o[0]) * Math.sin(r) * Math.cos(u)
    );
    var c =
    o[1] +
    Math.atan2(
    Math.sin(u) * Math.sin(r) * Math.cos(o[0]),
    Math.cos(r) - Math.sin(o[0]) * Math.sin(h));
    s.push([numberToDegree(c), numberToDegree(h)]);}
    s.push(s[0])
    return [s];
}

    3、画圆、画线、判断圈内外

//创建用户标记点
createUserMarkers(latitude,longitude) {
let txt = "";
if(this.data.distance>2000){
txt = "距离核定区域"+(this.data.distance/1000).toFixed(1)+"km"
}else{
txt = "已到核定区域"
}
    //只创建一个
let newMarkers = [{
callout: {
content: txt,
padding: 5,
borderRadius: 2,
bgColor: '#ffffff',
display: 'ALWAYS',
anchorY: 0,
anchorX: 0,
zIndex: 2
},
id: 1,
latitude: latitude,
longitude: longitude,
iconPath: '../../location.png',
width: '46px',
height: '46px',
rotate: 0,
alpha: 1,
zIndex: 5
},{
callout: {
content: "建筑标记点",
padding: 5,
borderRadius: 2,
bgColor: '#ffffff',
display: 'ALWAYS',
anchorY: 0,
anchorX: 0,
zIndex: 2
},
id: 2,
latitude: "39.923995",
longitude: "116.403517",
iconPath: '../../wb.png',
width: '36px',
height: '36px',
rotate: 0,
alpha: 1,
zIndex: 5
}]
this.setData({
markers: newMarkers
})
},
  //画圆形围栏
creatCircle() {
var array = countCircle('', '', '');
var jsons = []
array[0].forEach(element => {
var json = {};
json.latitude = element[1]
json.longitude = element[0]
jsons.push(json);
});
let polygons = this.data.polygons;
let newArray = [];
let params = {
fillColor: "#1791fc66",
strokeColor: "#FFF",
strokeWidth: 1,
zIndex: 3
}
polygons[0] = {};
polygons[0].points = jsons; //newArray;
newArray = Object.assign(polygons[0], params);
    //划线
let polyline = this.data.polyline;
polyline[0] = {};
polyline[0].points = [
{
latitude: this.data.latitude,
longitude: this.data.longitude,
},
{
latitude: "39.923995",
longitude: "116.403517",
}
];
let params_solid = {
color: "#FF0000DD",
width: 6,
zIndex: 3,
arrowLine:true
}
let newArray_solid = Object.assign(polyline[0], params_solid);
this.setData({
"polygons[0]": newArray,
"polyline[0]": newArray_solid
})
    //判断是圆内还是圆外
let newCirArray = [];
for (let j = 0; j < jsons.length; j++) {
let obj = {};
obj.lng = jsons[j].longitude;
obj.lat = jsons[j].latitude;
newCirArray.push(obj)
}
let nowPoint = {};
nowPoint.lat = this.data.latitude;
nowPoint.lng = this.data.longitude;
let flag = isPointInPolygon(nowPoint, newCirArray);
this.setData({
isFlag:flag
})
},

项目结构图