微信小程序地图polygons自己标点,三个点以上连成面

在微信小程序地图中,自己标点,三个点以上连成面,方法里边有注释

wxml

<map id="map" style="width:100%;height:100%;" longitude="{{longitude}}" latitude="{{latitude}}" bindtap="bindMap" polygons="{{polygons}}" markers='{{markers}}'></map>

js


Page({

  /**
   * 页面的初始数据
   */
  data: {
    longitude: 0,
    latitude: 0,
    markers:[],
    gonsArr:[],
    polygons: [{
      points: [],//给个空数组在页面刚开始渲染的时候会报错,但是不影响使用
      fillColor: "#ffff00",
      strokeColor: "#00B277",
      strokeWidth: 2,
      zIndex: 1
    }],
  },
  //点击地图的时候
  bindMap(e) {
    let arr=this.data.gonsArr    //不直接使用polygons[0].points是因为如果不够三个点会报错
    let arr1=this.data.markers   //点击地图添加一个标记点
    let latitude=e.detail.latitude   
    let longitude=e.detail.longitude   
    arr.push({latitude,longitude})   
    arr1.push({
	    latitude,
	    longitude,
	    iconPath: "../../image/map.png",
	    id: latitude,
	    width: '63rpx',
	    height: '88rpx'
	})
	//判断如果标记的点数大于等于3就给polygons[0].points赋值,如果小于3只添加点并且给gonsArr push一下
    if(arr.length>2){
      this.data.polygons[0].points=arr
      this.setData({
        polygons:this.data.polygons,
        markers:arr1,
        gonsArr:arr
      })
    }else{
      this.setData({
        markers:arr1,
        gonsArr:arr
      })
    }
  },
  //清除标记点和面
  clearGon(){
    let arr=this.data.polygons
    arr[0].points=[]
    this.setData({
      polygons:arr,
      markers:[],
      gonsArr:[]
    })
  },
  submitGon(){
    console.log(123)
  },
  
  getPosition() {
    var that = this;
    //  获取当前定位的经纬度信息
    wx.showLoading({
      title: "定位中",
      mask: true
    })
    wx.getLocation({
      type: 'gcj02',
      altitude: true, //高精度定位
      //定位成功,更新定位结果
      success: function (res) {
        var latitudee = res.latitude
        var longitudee = res.longitude
        that.setData({
          longitude: parseFloat(longitudee),
          latitude: parseFloat(latitudee),
        })
      },
      //定位失败回调
      fail: function (res) {
      },
      complete: function () {
      }
    })
  },

  onLoad(options) {
    this.getPosition()//获取当前经纬度
  },

})

**

polygons[0].points给空数组会报这个错,暂时没有什么好的解决办法,如果有解决办法,欢迎交流!

**在这里插入图片描述

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值