微信小程序地图多边形绘制功能示例 - 详细代码教程 - 常规

{"pages": ["pages/index/index"], "window": {"backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "多边形绘制", "navigationBarTextStyle": "black"}} {"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 });}} .container { width: 100%; height: 100%; } 这个示例代码实现了在地图上点击添加多边形的功能。当用户在地图上点击时，会将点击的经纬度添加到 points 数组中，并根据 points 数组绘制多边形。同时，地图会自动缩放以包含所有点击的点。