uniapp微信小程序如何使用高德地图实现电子围栏功能

在uniapp开发的微信小程序中，如何集成高德地图API实现电子围栏功能？需要获取用户实时位置并判断是否超出设定的围栏范围，求具体实现步骤和关键代码示例。目前遇到高德地图坐标系与微信小程序的差异问题，该如何转换？是否需要后端配合处理？

2 回复

在uniapp中，使用高德地图实现电子围栏功能，需引入高德小程序JS API。步骤如下：

  1. 申请高德小程序Key，配置域名白名单。
  2. 引入JS SDK，初始化地图。
  3. 使用AMap.Circle绘制圆形围栏，或AMap.Polygon绘制多边形围栏。
  4. 监听用户位置变化，通过AMap.GeometryUtil判断点与围栏关系（内部/外部）。
  5. 触发相应事件，如进出围栏提醒。

注意：需处理用户授权定位，并确保围栏数据与位置实时比对。


在 UniApp 微信小程序中，实现高德地图电子围栏功能需结合高德地图 JavaScript API 和小程序 API。以下是关键步骤和示例代码：

实现步骤

  1. 引入高德地图 SDK
    在 index.html 或对应页面引入高德地图 JS API：

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德地图Key"></script>

  2. 申请高德地图 Key
    在高德开放平台注册并获取 Key，需配置微信小程序的 AppID 白名单。

  3. 地图初始化
    在 UniApp 页面中初始化地图：

    onReady() {
  this.map = new AMap.Map('mapContainer', {
    zoom: 15,
    center: [116.397428, 39.90923] // 初始中心点
  });
}

    页面模板需包含容器：

    <view id="mapContainer" style="width:100%; height:300px;"></view>

  4. 绘制电子围栏
    使用 AMap.Polygon 绘制多边形围栏：

    drawFence() {
  const polygon = new AMap.Polygon({
    path: [
      [116.403322, 39.920255],
      [116.410703, 39.897555],
      [116.402292, 39.892353],
      [116.389846, 39.891365]
    ], // 多边形顶点坐标
    strokeColor: "#FF33FF",
    strokeWeight: 2,
    fillColor: "#1791fc",
    fillOpacity: 0.4
  });
  this.map.add([polygon]);
  this.fencePolygon = polygon; // 保存围栏对象
}

  5. 监听位置与围栏检测
    使用小程序 API 获取用户位置，结合高德地图判断是否在围栏内：

    checkInFence() {
  uni.getLocation({
    type: 'gcj02', // 高德坐标系
    success: (res) => {
      const userPos = [res.longitude, res.latitude];
      const isInside = this.fencePolygon.contains(userPos);
      if (isInside) {
        uni.showToast({ title: "在围栏内", icon: "success" });
      } else {
        uni.showToast({ title: "在围栏外", icon: "error" });
      }
    }
  });
}

注意事项

  • 坐标系：微信小程序默认返回 WGS84，高德地图使用 GCJ02，需在 getLocation 中指定 type: 'gcj02'。
  • 性能优化：频繁检测位置时建议使用 setInterval，但需合理设置间隔避免性能问题。
  • 权限配置：在 manifest.json 中申请位置权限：
    "mp-weixin": {
  "permission": {
    "scope.userLocation": {
      "desc": "用于电子围栏位置检测"
    }
  }
}

扩展建议

  • 可结合云函数存储围栏数据，实现动态围栏管理。
  • 使用 onRegionChange 事件优化检测逻辑，减少不必要的计算。

以上代码提供了基础实现框架，可根据实际需求调整围栏形状和检测逻辑。

回到顶部