微信小程序地图绘制多边形Demo - 使用polygon实现 - 常规

// index.js Page({ data: { markers: [], // 存储标记点的数组 polygon: [] // 存储多边形的点数组 },

// 按键1的点击事件，添加map的polygon的points标记 addMarker: function() { let newMarker = { id: this.data.markers.length + 1, latitude: 39.90469, // 纬度 longitude: 116.40717 // 经度 }; let markers = this.data.markers; markers.push(newMarker); this.setData({ markers: markers }); },

// 按键2的点击事件，绘制polygon多边形 drawPolygon: function() { let polygon = this.data.polygon;

// 添加多边形的点，可以根据需要自行修改
polygon.push({
  latitude: 39.90923,
  longitude: 116.397428
});
polygon.push({
  latitude: 39.90923,
  longitude: 116.417428
});
polygon.push({
  latitude: 39.89923,
  longitude: 116.417428
});
polygon.push({
  latitude: 39.89923,
  longitude: 116.397428
});

this.setData({
  polygon: polygon
});

// 地图区域改变事件 regionChange: function(e) { console.log(e.type); } }) /* index.wxss */ .container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; }

.map { width: 100%; height: 80vh; }

.button { margin-top: 20px; } 在微信开发者工具中创建一个新的小程序项目，将上述代码复制到对应的文件中，即可运行该Demo。按键1点击后，地图上会添加一个标记点；按键2点击后，地图上会绘制一个多边形。你可以根据需要修改标记点和多边形的坐标。