用微信小程序写1个demomap的polygon多边形绘制功能

以下是一个使用微信小程序实现多边形绘制功能的示例代码：

在小程序的 json 文件中添加以下代码：

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "多边形绘制",
    "navigationBarTextStyle": "black"
  }
}

在小程序的 JavaScript 文件中添加以下代码：

Page({
  data: {
    points: [],
    polygon: []
  },

  onReady: function () {
    this.mapCtx = wx.createMapContext('map');
  },

  handleTap: function (e) {
    const { points, polygon } = this.data;

    const latitude = e.detail.latitude;
    const longitude = e.detail.longitude;
    points.push({ latitude, longitude });

    const polygonPoints = points.map(point => ({
      latitude: point.latitude,
      longitude: point.longitude
    }));
    polygonPoints.push(polygonPoints[0]); // 闭合多边形

    this.setData({
      points,
      polygon: [{
        points: polygonPoints,
        strokeWidth: 2,
        strokeColor: '#FF0000',
        fillColor: '#FFD70033'
      }]
    });

    this.mapCtx.includePoints({
      padding: [50],
      points: points
    });
  }
})

在小程序的 wxml 文件中添加以下代码：

<view class="container">
  <map id="map" show-location bindtap="handleTap" style="width: 100%; height: 100%;"></map>
</view>

在小程序的 wxss 文件中添加以下代码：

.container {
  width: 100%;
  height: 100%;
}

这个示例代码实现了在地图上点击添加多边形的功能。当用户在地图上点击时，会将点击的经纬度添加到 points 数组中，并根据 points 数组绘制多边形。同时，地图会自动缩放以包含所有点击的点