微信小程序地图开发实战：手把手教你实现电子围栏（圆形+多边形）

最新推荐文章于 2026-05-15 14:04:29 发布

原创

最新推荐文章于 2026-05-15 14:04:29 发布 · 570 阅读

微信小程序地图开发实战：手把手教你实现电子围栏（圆形+多边形）

最近在做一个社区配送的小程序项目，客户提了个需求，要在后台地图上圈出几个固定的配送范围，配送员一旦进入这个区域就自动触发通知。这不就是典型的电子围栏应用场景吗？听起来简单，但真动手在小程序里实现时，才发现有不少细节需要琢磨。微信小程序的 map 组件功能其实挺强大，支持标记点、折线、多边形和圆形覆盖物，但官方文档对如何动态创建和交互讲得比较基础。我花了不少时间踩坑，才把圆形和多边形两种围栏的绘制、编辑和删除流程跑通。今天就把这套实战经验整理出来，如果你也在做类似的地图围栏功能，希望这篇内容能帮你省下一些摸索的时间。

电子围栏的核心，其实就是在地图上划定一个虚拟的地理边界，然后通过位置判断实现业务逻辑。在小程序里，我们可以利用 polygons（多边形）和 circles（圆形）这两个属性来可视化围栏。但难点往往不在“画出来”，而在如何让用户方便地“画出来”——比如通过点击地图添加顶点、实时调整形状、计算圆形半径等。下面，我们就从项目配置开始，一步步构建一个功能完整的电子围栏模块。

1. 项目基础与地图初始化

在开始绘制围栏之前，我们需要一个能正常显示和交互的地图。微信小程序的 map 组件是这一切的基础，它的配置项不少，有些参数对后续围栏功能的实现至关重要。

首先，在页面的 WXML 文件中，放置一个 map 组件。这里我建议给 map 组件设置一个固定的 id，比如 "myMap"，方便在需要时通过 wx.createMapContext 来获取地图上下文，执行更复杂的操作（比如获取当前视野范围，虽然围栏绘制不一定用到，但为扩展留个口子）。longitude 和 latitude 用于设置地图中心的初始坐标，这个坐标最好是你业务区域的中心点，或者根据用户位置动态获取。

<!-- pages/fence/fence.wxml -->
<view class="container">
  <map
    id="myMap"
    longitude="{
  
  {centerLongitude}}"
    latitude="{
  
  {centerLatitude}}"
    scale="14"
    bindtap="onMapTap"
    markers="{
  
  {markers}}"
    polygons="{
  
  {polygons}}"
    circles="{
  
  {circles}}"
    show-location
    style="width: 100%; height: 70vh;">
  </map>
  <view class="control-panel">
    <!-- 控制按钮区域，后续添加 -->
  </view>
</view>

几个关键属性说明：

scale: 地图缩放级别，数值越大，地图越详细。建议根据围栏的实际物理大小来设置一个合适的初始值。
bindtap: 地图的点击事件绑定，这是我们实现交互式绘制的核心。
show-location: 显示带有方向的当前定位点，对于需要参照用户位置绘制围栏的场景很有帮助。
style: 务必给地图一个明确的高度（如 70vh），否则地图可能无法显示。

在对应的 JS 文件中，我们需要初始化数据。这里我习惯将地图状态和围栏数据分开管理，逻辑更清晰。

// pages/fence/fence.js
Page({
  data: {
    // 地图中心点（示例坐标，可替换为实际值或动态获取）
    centerLongitude: 116.397428,
    centerLatitude: 39.90923,
    // 地图标记点（用于显示围栏的顶点或圆心）
    markers: [],
    // 多边形围栏数据
    polygons: [],
    // 圆形围栏数据
    circles: [],
    // 当前绘制模式：'polygon' | 'circle' | 'none'
    drawMode: 'none',
    // 临时存储多边形顶点
    tempPolygonPoints: [],
  },

  onLoad: function(options) {
    // 可以在这里尝试获取用户授权并定位，更新centerLongitude和centerLatitude
    // 或者从服务器加载已保存的围栏数据
  },
})