正常情況下是沒有手機(jī)上畫電子圍欄的，公共平臺(tái)上我也沒找到，所以走了一個(gè)歪點(diǎn)子，就是給地圖添加點(diǎn)擊事件，記錄點(diǎn)的位置，在畫到電子圍欄上就是添加電子圍欄了，如果只是顯示電子圍欄就簡單了

一、多邊形電子圍欄

<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：地圖點(diǎn)擊方法

creatPolygons：點(diǎn)圖圍欄繪制方法

markers：顯示位置點(diǎn)

polygons：連線位置點(diǎn)

Page({
    data: {
      latitude: 24.463713,
      longitude: 118.082085,
      markers: [],
      polygons: [],
    },

    creatPolygons() {
      //創(chuàng)建多邊形圍欄
      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) {
      //創(chuàng)建標(biāo)記點(diǎn)
      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() {
      //刪除圍欄和標(biāo)記
      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：標(biāo)記位置點(diǎn)。這和多邊形就不一樣了，我只需要兩個(gè)點(diǎn)，第一個(gè)點(diǎn)為圓形的中心，第二個(gè)點(diǎn)則為圓形的邊

distance：計(jì)算第一個(gè)點(diǎn)和第一個(gè)點(diǎn)的距離（以米為單位，如果要千米就 /1000）

markers：位置點(diǎn)顯示

circles：圓形圍欄顯示

Page({
    data: {
      latitude:39.90923,
      longitude: 116.397428,
      markers: [],
      circles: [],
    },
    removePolygons() {
        //刪除圍欄和標(biāo)記
        this.setData({
          markers: [],
          circles: []
        })
    },
    bindtapMap(e) {
      //創(chuàng)建標(biāo)記點(diǎn)
      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) {},


  }

)

所遇到的問題：

1.circles內(nèi)我添加level無效，導(dǎo)致我看不到圍欄下面的地圖，我也沒解決他為啥不好使，所以我就給圍欄添加顏色時(shí)做了點(diǎn)手腳（?fillColor:?"#7cb5ec88",color:?'#FF0000DD'）文章來源地址http://www.zghlxwxcb.cn/news/detail-636287.html

到了這里，關(guān)于微信小程序 地圖map（電子圍欄圓形和多邊形）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！