保姆级教程：给你的UniApp项目加上‘电子围栏’管理后台（高德地图多边形编辑）
UniApp实战：高德地图电子围栏全流程开发指南
外卖配送App的运营团队最近遇到一个棘手问题：如何精准管理不同商家的配送范围？传统的手工标注方式不仅效率低下，更难以应对频繁的边界调整。本文将带你从零构建一个完整的电子围栏管理系统，涵盖地图展示、多边形绘制、编辑修改和数据持久化全流程。
1. 技术选型与前期准备
在UniApp生态中实现地图功能通常面临三个选择：官方map组件、第三方SDK封装或RenderJS直调原生API。经过实际对比测试，我们发现：
- 官方map组件：存在功能限制和APP端层级问题
- WebView嵌入方案：性能损耗较大
- RenderJS方案：可直接调用高德地图JS API，功能最完整
关键配置提示：使用高德地图JS API需要先申请安全密钥对，包括Web端Key和Security_JS_Code
基础环境搭建步骤：
- 创建UniApp项目（HBuilderX 3.4+）
- 安装高德地图JavaScript API加载器
- 配置manifest.json的Web配置项：
"h5": { "template": "public/index.html", "scripts": [ "https://webapi.amap.com/maps?v=2.0&key=您的高德Key" ] }2. 核心功能模块设计
2.1 地图容器初始化
采用响应式设计确保地图适配不同设备尺寸：
data() { return { mapHeight: uni.getSystemInfoSync().windowHeight, mapInstance: null, polygonEditor: null } }, mounted() { this.initMapContainer() }地图初始化时需要特别注意坐标系问题。高德地图采用GCJ-02坐标系，若后端存储的是WGS-84坐标（GPS原始数据），需提前进行坐标转换。
2.2 多边形编辑状态机
设计三种操作状态提升用户体验：
| 状态 | 描述 | UI表现 |
|---|---|---|
| VIEW | 仅查看模式 | 禁用编辑控件 |
| EDIT | 顶点编辑模式 | 显示可拖拽锚点 |
| CREATE | 新建围栏模式 | 启用点击添加顶点 |
状态转换逻辑示例：
toggleEditMode() { if(this.currentMode === 'VIEW') { this.polygonEditor.open() this.currentMode = 'EDIT' } else { this.polygonEditor.close() this.currentMode = 'VIEW' } }3. 关键交互实现细节
3.1 围栏绘制算法优化
传统逐点点击绘制方式效率较低，我们改进为：
- 首次点击确定中心点
- 后续点击生成对称多边形
- 支持拖动调整顶点位置
核心算法片段：
generateRegularPolygon(center, point, sides = 6) { const radius = this.calculateDistance(center, point) const coordinates = [] for(let i = 0; i < sides; i++) { const angle = (2 * Math.PI * i) / sides const x = center.lng + radius * Math.cos(angle) const y = center.lat + radius * Math.sin(angle) coordinates.push([x, y]) } return coordinates }3.2 数据持久化方案
推荐两种存储格式供后端处理：
简洁格式（适合简单围栏）
{ "fenceId": "123", "coordinates": [ [116.403322,39.920255], [116.410703,39.897555], [116.438216,39.912353] ] }完整格式（含业务属性）
{ "fenceId": "123", "merchantId": "456", "vertices": [ { "order": 1, "lng": 116.403322, "lat": 39.920255, "isFixed": false } ], "createTime": "2023-07-20T10:00:00Z" }4. 性能优化实践
4.1 地图渲染优化
- 使用
map.setFitView()自动调整视野 - 对复杂多边形进行简化处理
- 实现围栏数据的懒加载
4.2 内存管理要点
- 组件销毁时清理地图实例
- 避免频繁创建/销毁覆盖物
- 使用对象池管理多边形实例
典型的内存释放代码：
beforeDestroy() { if(this.mapInstance) { this.mapInstance.clearMap() this.mapInstance.destroy() } this.polygonEditor = null }5. 业务场景扩展
电子围栏技术可应用于更多场景：
- 共享单车停放区管理：设置合规停放区域
- 智慧园区安防：定义重点监控区域
- 物流轨迹分析：判断车辆是否偏离路线
某外卖平台实测数据显示，采用电子围栏管理后：
- 配送范围纠纷减少62%
- 商家运营效率提升45%
- 客户投诉率下降38%
实际开发中发现，在高密度城市区域采用六边形围栏比传统多边形更利于均衡配送压力。对于大型园区项目，建议结合GeoJSON标准实现更复杂的地理围栏逻辑。