更新记录

1.0.1（2026-06-24）

1.0.1（2026-06-24）

• 目录与组件命名统一为连字符风格：Mapbox-Pick-Point
• uni_modules id 更新为 elink-Mapbox-Pick-Point

1.0.0（2026-06-24）

• 首次发布
• 支持 Mapbox 地图拖选点（中心十字准星 + move 防抖）
• 支持 WGS84 / GCJ02 坐标输出
• 支持天地图逆地理编码（可选）
• 支持天地图 + Mapbox 卫星混合底图
• 提供 js_sdk：attachPickPoint / detachPickPoint 叠加到已有地图

平台兼容性

Mapbox-Pick-Point 插件使用说明

基于 Mapbox GL JS 与 uni-app renderjs 的地图拖选点 uni_modules 插件。用户拖动地图，以屏幕中心十字准星为选点位置，支持坐标系转换与可选天地图逆地理编码。

目录结构

Mapbox-Pick-Point/
├── package.json
├── readme.md
├── changelog.md
├── components/
│   └── Mapbox-Pick-Point/
│       └── Mapbox-Pick-Point.vue
├── js_sdk/
│   ├── index.js
│   ├── pickPointController.js
│   ├── crosshair.js
│   ├── coordOutput.js
│   ├── tiandituRegeo.js
│   ├── mapStyle.js
│   └── constants.js
└── examples/
    ├── standalone-page.vue
    └── overlay-on-existing-map.js

运行环境

安装依赖

在宿主项目中安装 npm 依赖：

npm install mapbox-gl coordtransform

将 Mapbox-Pick-Point 文件夹复制到项目的 uni_modules/ 目录下。组件支持 easycom 自动引入，无需手动注册。

获取密钥

建议将密钥配置在业务项目的常量文件中，不要提交到公开仓库。

模式 A：独立选点组件

适用于整页选点场景（如选择农场地址、设备安装位置）。

基础用法

<template>
  <view>
    <Mapbox-Pick-Point
      :access-token="mapboxToken"
      :tianditu-tk="tiandituTk"
      tip="拖动地图，选择农场地址"
      height="70vh"
      output-crs="gcj02"
      @change="onPickChange"
      @resolve="onPickResolve"
    />
    <view>
      <text>地址：{{ address }}</text>
      <text>经纬度：{{ coordText }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      mapboxToken: "YOUR_MAPBOX_ACCESS_TOKEN",
      tiandituTk: "YOUR_TIANDITU_TK",
      address: "---",
      coordText: "---",
      pickResult: null,
    };
  },
  methods: {
    onPickChange(payload) {
      this.pickResult = payload;
      this.address = payload.address;
      this.coordText = `${payload.position[0].toFixed(6)}, ${payload.position[1].toFixed(6)}`;
    },
    onPickResolve(payload) {
      this.pickResult = payload;
      this.address = payload.address;
    },
  },
};
</script>

Props

Events

PickPayload 结构：

{
  position: [lng, lat],      // 按 outputCrs 输出
  wgs84: [lng, lat],         // Mapbox 原始 WGS84
  address: '北京市...',      // 地址文本或占位
  addressPending: false,     // 是否仍在等待逆地理
  regeoError: undefined      // 逆地理失败时的错误信息
}

模式 B：叠加到已有地图（js_sdk）

适用于主地图已存在、只需临时开启选点的场景。在 renderjs 中引入：

import {
  attachPickPoint,
  detachPickPoint,
  destroyPickPoint,
} from "@/uni_modules/Mapbox-Pick-Point/js_sdk/index.js";

// 开启选点
attachPickPoint(mapboxMap, {
  tip: "拖动地图，选择安装设备位置",
  outputCrs: "gcj02",
  enableRegeo: false,
  onChange: (payload) => {
    ownerInstance.callMethod("onPositionSelected", payload.position);
  },
});

// 关闭选点（保留地图）
detachPickPoint(mapboxMap);

// 组件销毁时彻底清理
destroyPickPoint(mapboxMap);

js_sdk API

演示示例项目

仓库内提供独立演示项目 Mapbox-Pick-Point-demo/，可直接用 HBuilderX 打开运行。

运行步骤

1. 用 HBuilderX 打开 Mapbox-Pick-Point-demo 目录
2. 在 config/map.js 中填入 Mapbox token 与天地图 tk
3. 在演示项目根目录执行 npm install
4. 运行到 App 或 H5 浏览器

演示项目结构

Mapbox-Pick-Point-demo/
├── uni_modules/Mapbox-Pick-Point/   # 插件副本
├── config/map.js                  # 密钥配置
├── pages/index/index.vue          # 选点演示页
├── manifest.json
├── pages.json
└── package.json

注意事项

1. 所有源文件使用 UTF-8 编码
2. Mapbox 中心坐标为 WGS84；国内业务通常需要 GCJ02，请设置 output-crs="gcj02"
3. 逆地理依赖天地图外网 API，无 tk 时将使用坐标作为地址占位
4. 插件通过 renderjs 运行，不支持微信小程序
5. 销毁页面或组件时会自动清理 move 监听、定时器与十字准星 DOM

常见问题

Q：拖动地图时没有触发 change 事件？

确认 active 为 true，且地图已完成 load。检查 accessToken 是否有效。

Q：地址一直显示「正在解析地址…」？

检查 tiandituTk 是否正确，以及设备是否能访问 api.tianditu.gov.cn。

Q：如何在已有地图上只选坐标、不要逆地理？

设置 enableRegeo: false（组件 prop 或 js_sdk options）。

Q：多实例如何避免容器 id 冲突？

为每个组件设置不同的 instance-id prop。

版本

当前版本：1.0.1

详见 changelog.md