跳到主要内容

使用定位 Location

Location 组件用于在表单中获取用户当前的地理位置，适用于签到打卡、现场巡检、外勤记录等场景。

基础用法​

  1. 在表单设计器中拖入 Location 组件。
  2. 运行时，用户点击"获取定位"按钮，浏览器会请求定位权限并获取当前经纬度。
  3. 定位成功后，坐标信息自动填入表单字段，随表单一起提交保存。
提示

首次使用时浏览器会弹出定位权限弹窗，用户需要点击"允许"才能获取位置。

配置逆地理编码（坐标转地址）​

默认情况下组件只展示经纬度。如果希望同时展示可读地址（如"北京市海淀区中关村大街1号"），需要配置 reverseGeocodeUrl。

  1. 准备一个逆地理编码接口（可使用高德、百度地图 API 封装，或自有后端服务）。
  2. 在组件属性中填入 reverseGeocodeUrl。
  3. 定位成功后，组件会自动 POST { latitude, longitude } 到该地址，期望返回 { address: "地址字符串" } 或直接返回地址字符串。

location-1

接口示例：

POST /api/reverse-geocode
Content-Type: application/json

{ "latitude": 39.9042, "longitude": 116.4074 }
{ "address": "北京市东城区天安门广场" }

值的存储格式​

组件值以 JSON 字符串存储：

{
  "latitude": 39.9042,
  "longitude": 116.4074,
  "address": "北京市东城区天安门广场"
}

其中 address 仅在配置了 reverseGeocodeUrl 且成功获取时存在。

在 Scripts 中通过 JS 调用​

除了使用 Location 组件，还可以在表单 Scripts 中通过 utilsApi.getLocation() 直接调用定位能力，适用于需要在自定义逻辑中获取位置的场景。

const result = await utilsApi.getLocation({
  enableHighAccuracy: true,
  timeout: 10000,
  maximumAge: 0,
  reverseGeocodeUrl: '/api/reverse-geocode', // 可选
  suppressGeocodeError: false, // 为 true 时逆地理编码失败不报错，降级返回经纬度
});

// result: { latitude, longitude, accuracy, address }

返回值是一个 Promise，resolve 后得到 { latitude, longitude, accuracy, address } 对象。可以拿到结果后自行赋值给表单字段：

formApi.setFieldValue('locationField', JSON.stringify(result));