微信小程序 map polygon 列表

### 微信小程序地图组件绘制多边形列表 #### 创建地图上下文对象 要实现在微信小程序中利用地图组件绘制多边形列表，首先需要创建 `map` 上下文对象。这可以通过调用微信小程序 API 中的 `wx.createMapContext` 方法完成[^4]。 ```javascript const mapCtx = wx.createMapContext('myMap') ``` #### 准备多边形数据结构 定义一个多边形的数据模型非常重要。每个多边形由一组坐标点构成，这些点按照顺时针方向排列形成闭合路径。下面是一个简单的 JavaScript 数组表示法： ```json [ { "points": [ { "latitude": 23.099994, "longitude": 113.32452 }, { "latitude": 23.09876, "longitude": 113.32452 }, { "latitude": 23.09876, "longitude": 113.32652 } ], "color": "#FF0000", "width": 2, "dots": false } ] ``` 此数组中的每一项代表一个独立的多边形及其样式属性。 #### WXML 文件配置 在页面布局文件 `.wxml` 中引入 `<map>` 组件，并为其指定唯一 ID 和其他必要参数以便后续操作[^3]: ```html <view class="container"> <map id="myMap" style="width: 100%; height: 300px;" bindmarkertap="onMarkerTap"></map> </view> ``` #### JS 实现逻辑 接下来，在对应的 `.js` 文件里编写函数来加载并渲染上述准备好的多边形数据至地图上: ```javascript Page({ onLoad() { const polygonsData = this.getPolygons(); // 获取多边形数据的方法 setTimeout(() => { let tempOverlay = []; polygonsData.forEach((polygon) => { tempOverlay.push({ points: polygon.points.map(point => ({ latitude: point.latitude, longitude: point.longitude })), fillColor: 'rgba(255, 0, 0, 0.5)', strokeColor: '#ff0000', strokeWidth: polygon.width || 2 }); }); this.setData({ overlays: [...this.data.overlays, ...tempOverlay]}); }, 100); }, getPolygons(){ return [{ "points":[...],// 坐标集合 "color":"#FF0000", "width":2 }] } }) ``` 这段代码展示了如何遍历多边形数据集并将它们作为覆盖物添加到地图视图中。注意这里设置了填充颜色 (`fillColor`) 及边界线的颜色 (`strokeColor`) 和宽度 (`strokeWidth`) 来美化显示效果。