正常情況下是沒有手機上畫電子圍欄的，公共平臺上我也沒找到，所以走了一個歪點子，就是給地圖添加點擊事件，記錄點的位置，在畫到電子圍欄上就是添加電子圍欄了，如果只是顯示電子圍欄就簡單了
一、多邊形電子圍欄
<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.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: []})},})二、圓形電子圍欄
?
<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.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'）
