微信小程序 地图map(电子围栏圆形和多边形)

正常情况下是没有手机上画电子围栏的,公共平台上我也没找到,所以走了一个歪点子,就是给地图添加点击事件,记录点的位置,在画到电子围栏上就是添加电子围栏了,如果只是显示电子围栏就简单了

一、多边形电子围栏

复制代码
<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) {},


  }

)

所遇到的问题:

1.circles内我添加level无效,导致我看不到围栏下面的地图,我也没解决他为啥不好使,所以我就给围栏添加颜色时做了点手脚( fillColor: "#7cb5ec88",color: '#FF0000DD')

相关推荐
牧杉-惊蛰11 分钟前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app
拼图2095 小时前
微信小程序——skyline版本问题
微信小程序·小程序
mg6686 小时前
微信小程序入门实例_____打造你的专属单词速记小程序
微信小程序·小程序
程序员陆通6 小时前
Vibe Coding开发微信小程序实战案例
微信小程序·小程序·notepad++·ai编程
「、皓子~7 小时前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
nbsaas-boot7 小时前
[特殊字符] 分享裂变新姿势:用 UniApp + Vue3 玩转小程序页面分享跳转!
小程序·uniapp·notepad++
老A技术联盟7 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
you45807 小时前
小程序学习笔记:使用 MobX 实现全局数据共享,实例创建、计算属性与 Actions 方法
笔记·学习·小程序
风铃喵游7 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构
说私域8 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的抖音渠道力拓展与多渠道利润增长研究
人工智能·小程序·开源