小程序获取你选择map上的经纬度与绘制多边形区域

polygons绘制四边形找定义数组点

polygons绘制多边形区域里面有数组
一般会用到获取经纬度 进行判断连点

代码

wxml

<view class="container">
    <view class="section">
       <button type="primary" bindtap="mapView">地图选点</button>
    </view>
</view>

js

Page({

  /**
   * 页面的初始数据
   */
  data: {
  },
  mapView: function () {
    var that = this
    wx.chooseLocation({
      success: function (res) {
        console.log(res);
        that.data.userAddress = res.address + res.name + ',latitude=' + res.latitude
          + ",longitude=" + res.longitude;
          console.log("您选择的定位地址 = " + that.data.userAddress);
          console.log(res.latitude,res.longitude)
      },
    })
   
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

使用polygons来绘制多边形区域

这里的是顶角不可以拖拽的

效果图

代码

wxml

  <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" polygons="{{polygons}}" bindregionchange="regionchange"
    show-location style="width: 100%; height: 100vh;">
  </map>

wxss

.intro {
  margin: 30px;
  text-align: center;
}

js

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

  },
  onLoad(options) {
  },


}

)