百度地图实现电子围栏
1. 电子围栏需求2. 实现方案3. 参考链接4. 主要代码5. 示例文件和代码1. 电子围栏需求
通过地图实现可绘制区域的电子围栏。电子围栏应用场景：如app在区域内签到，区域内鉴权等。2. 实现方案
利用浏览器获取当前地理位置，利用鼠标绘制点线画，获得围栏各点坐标和当前位置，并存储到数据库。通过当前在线移动端获取当前地理位置，与电子围栏数据校验对比。3. 参考链接
百度地图区域绘制
/jsdemo.htm#f0_7
百度地图获取当前位置
/jsdemo.htm#i8_1
4. 主要代码
/*** 利用浏览器重新定位*/getBroswerLocation(){// 判断当前储存是否已有定位数据，有则定位到所记录的位置if (sessionStorage.getItem('geolocation')) {const p = sessionStorage.getItem('geolocation');this.baiduMap.panTo(JSON.parse(p));return;}var geolocation = new BMap.Geolocation();geolocation.getCurrentPosition( (r) => {// 判断位置的状态结果，成功则在地图上续投一个标识if (geolocation.getStatus() == BMAP_STATUS_SUCCESS) {var mk = new BMap.Marker(r.point);// 绘制位置标识this.baiduMap.addOverlay(mk);// 定位到当前位置this.baiduMap.panTo(r.point);console.log(r.point);// 把当前位置写入session储存（可选），关闭浏览器后清空数据。sessionStorage.setItem('geolocation', JSON.stringify(r.point));}else {// 打印出非成功的其他状态 状态描述说明请看下一段。console.error('Map Geolocation Failed =>' + geolocation.getStatus());}}, {enableHighAccuracy: true })}
//关于状态码//BMAP_STATUS_SUCCESS检索成功。对应数值“0”。//BMAP_STATUS_CITY_LIST城市列表。对应数值“1”。//BMAP_STATUS_UNKNOWN_LOCATION位置结果未知。对应数值“2”。//BMAP_STATUS_UNKNOWN_ROUTE导航结果未知。对应数值“3”。//BMAP_STATUS_INVALID_KEY非法密钥。对应数值“4”。//BMAP_STATUS_INVALID_REQUEST非法请求。对应数值“5”。//BMAP_STATUS_PERMISSION_DENIED没有权限。对应数值“6”。(自 1.1 新增)//BMAP_STATUS_SERVICE_UNAVAILABLE服务不可用。对应数值“7”。(自 1.1 新增)//BMAP_STATUS_TIMEOUT超时。对应数值“8”。(自 1.1 新增)
/*** 初始化多边形覆盖物*/initPolygonOverlay() {if (this.options.overlay && this.options.overlay.length) {const tempArr = [];this.options.overlay.forEach(element => {tempArr.push(new BMap.Point(element.longitude, element.latitude));});const polygon = new BMap.Polygon(tempArr, {strokeColor: "red", fillColor: "red", strokeWeight: 2, strokeOpacity: 0.8, fillOpacity: 0.5 }); //创建多边形// 在地图上标识多边形this.baiduMap.addOverlay(polygon);}}
5. 示例文件和代码
以上的部分核心代码。
下面链接为整个组件的ts和html代码：
/guoye/codes/cmasnywkj7r9l5e4dpz0i86
