微信小程序地图点击设置范围并创建区域蒙层

微信小程序地图点击设置范围并创建区域蒙层

微信小程序用户点击地图，创建marker并且连接marker绘制出一块区域。

1.index.wxml

代码如下（示例）：

<map id="myMap" longitude="{{longitude}}" bindtap="bindtap" latitude="{{latitude}}" scale="14"  polygons="{{polygons}}" show-location  markers="{{markerArray}}">
  </map>

2.index.js

代码如下（示例）：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    marker: "marker",
    latitude: "24.47951",
    longitude: "118.08948",//这个是你的经纬度
    // polygons:[],
    polygons: [{
      points: [{//这里的数组是你规定的多边形区域，
      //同上所述 你要在map上找到你所要的坐标 进行划分值
        longitude: 118.082771,
        latitude: 24.494959
      },
      {
        longitude: 118.061142,
        latitude: 24.486836
      }, {
        longitude: 118.082771,
        latitude: 24.494959
      }],
      fillColor: "#F2D7BC99",//这里面设置透明度 后面加数字代表透明度
      strokeColor: "#FFF",
      strokeWidth: 2,
      zIndex: 1
    }],
    points: [],// 存放点击的坐标
    markerArray: [
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
  bindtap: function (e) {
    var markerArray = this.data.markerArray
    var points = this.data.points
    var point = e.detail
    points.push(point)
    markerArray.push({
      id:Number(new Date()),
      longitude: point.longitude,
      latitude: point.latitude,
      width:30,
      height:30,
      iconPath: '../static/image/marker.jpeg',
    })
    if (markerArray.length < 5) {
      this.setData({
        points: points,
        polygons: [{
          points: this.data.points,
          fillColor: "#F2D7BC99",//这里面设置透明度 后面加数字代表透明度
          strokeColor: "#FFF",
          strokeWidth: 2,
          zIndex: 1
        }],
        markerArray:markerArray
      })
      console.log(this.data);
    }
  },
})

提示

目前仅为测试，已实现效果。样式不精美，有待进一步改善。