# coord-picker > Coordinates picker for AMap & TMap. Latest version **0.8.14** (published 2026-03-25) · MIT license · 0 weekly downloads ## Install ```sh npm install coord-picker pnpm add coord-picker yarn add coord-picker bun add coord-picker ``` ## Health **Score 55/100 (C)** — status: active. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads; pre 1.0. ## Facts | | | |---|---| | Version | 0.8.14 | | Published | 2026-03-25 | | First published | 2020-05-11 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 7 | | Unpacked size | 3.1 MB | | Known vulnerabilities | 0 (+8 in 2 direct dependencies) | | Install scripts | no | | Author | Cloyd Lau | | Maintainers | moer, wangyuan389, hanneil, yang06061079, tanzhiwen, cloydlau | | Keywords | map, AMap, TMap, coordinates | ## Links - npm: https://www.npmjs.com/package/coord-picker - npm.io page: https://npm.io/package/coord-picker ## Dependencies (7) - [kikimore](https://npm.io/package/kikimore.md) 0.13.3 - [lodash-es](https://npm.io/package/lodash-es.md) 4.17.21 - [pic-viewer](https://npm.io/package/pic-viewer.md) 0.8.4 - [sweetalert2](https://npm.io/package/sweetalert2.md) 11.6.16 - [vue-global-config](https://npm.io/package/vue-global-config.md) 0.4.0 - [sweetalert2-preset](https://npm.io/package/sweetalert2-preset.md) 0.2.2 - [@amap/amap-jsapi-loader](https://npm.io/package/@amap/amap-jsapi-loader.md) 1.0.1 ## Recent versions - 0.8.14 (latest) — 2026-03-25 - 0.8.13 — 2025-10-29 - 0.8.12 — 2025-05-28 - 0.8.11 — 2025-05-28 - 0.8.10 — 2025-05-21 - 0.8.9 — 2024-12-31 - 0.8.8 — 2024-12-31 - 0.8.7 — 2024-03-21 - 0.8.6 — 2023-12-25 - 0.8.5 — 2023-07-28 - 0.8.4 — 2023-04-25 - 0.8.3 — 2022-12-16 - 0.8.2 — 2022-11-30 - 0.8.1 — 2022-11-30 - 0.8.0 — 2022-11-30 - … 47 more at https://npm.io/package/coord-picker/versions ## README

Coord Picker

坐标拾取工具。

## 特性 - 坐标拾取、绘制点位 (双向绑定坐标) - 拖拉拽绘制折线 (双向绑定坐标) - 拖拉拽绘制矩形、内嵌贴图的矩形 (双向绑定坐标) - 拖拉拽绘制多边形 (双向绑定坐标) - 覆盖物支持只读模式 & 编辑模式 - 支持限定覆盖物的数量上限、下限 - POI 搜索、搜索关键字自动补全 - 根据传参情况智能初始化至合适的位置
## 安装 ```shell npm i coord-picker ``` ### 外置依赖 - vue@2 - element-ui ### 局部注册 ```vue ``` ### 全局注册 ```ts import CoordPicker from 'coord-picker' Vue.use(CoordPicker, { // 全局配置 }) ``` ### CDN + ESM > ⚠ 暂不支持 (ElementUI 未提供 ESM 导出) ### CDN + IIFE ```html

```
## 属性 > 这里仅列出基础参数，覆盖物的参数请在相关章节查看 | 名称 | 说明 | 类型 | 默认值 | | ----------------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------ | | show[.sync] | 开关 | boolean | `false` | | mapType | 地图显示模式 ,可以选中在弹窗中显示还是直接显示面板关 | string | dialog -> 弹窗， panel -> 面板 | | loadOptions | [AMapLoader.load 的参数](https://lbs.amap.com/api/jsapi-v2/guide/abc/load/) ，其中 `loadOptions.key` 必传 | object | | | mapOptions[.sync] | [AMap.Map 的参数 2](https://lbs.amap.com/api/javascript-api/reference/map) | object | | | city | 初始行政区 | string | | | lng[.sync] | 经度 | string / number | | lat[.sync] | 纬度 | string / number | | precision | 坐标精度（保留几位小数） | number | `6` | | address[.sync] | 地址 | string | | addressComponent | 地址成分 | object / (addressComponent: [AddressComponent](https://lbs.amap.com/api/javascript-api/reference/lnglat-to-address)) => string | | | rangeLimit | 限制绘制内容范围 | function / object | undefined | | polylineStyle | 线条样式 | object / object | object | | labelMarkerStyle | 线条label样式 | object / object | object | > ⚠ 在打开 `coord-picker` 之前，请确保所有参数已传入，为避免与用户的操作发生冲突，组件内部不会监听参数后续的变化。 ### city 高德 Web 服务 API 的同名参数。可选值：指定城市的中文 (如北京)、指定城市的中文全拼 (beijing)、citycode (010)、adcode (110000)，不支持县级市。当指定城市查询内容为空时，会进行全国范围内的地址转换检索。 adcode 信息可参考[城市编码表](https://lbs.amap.com/api/webservice/download)获取。长度超过 6 位数？组件内部做了处理，如果你传入的 city 超过 6 位数，也会以仅保留前 6 位的形式支持。 ### addressComponent 获取的 address 默认是包含省市区的完整地址，你可以用以下两种方式来自定义地址成分： - object ```json { "province": true, // address 中是否包含省 "city": true, // address 中是否包含市 "district": true // address 中是否包含区县 } ``` - function ```ts ;({ province, city, district }) => `${province} - ${city} - ${district}` ``` ### mapOptions 为什么支持双向绑定？ - mapOptions 包含可能发生变化的属性，如缩放比例 `zoom`
## 绘制点位 ### 属性 | 名称 | 说明 | 类型 | 默认值 | | ------------- | ------------ | --------------------------- | ------ | | marker[.sync] | 点位列表 | object[] | | | markerCount | 点位数量限制 | number / [number?, number?] | `1` | #### markerCount 类型 - `number`：数量上限 - `[number?, number?]`：[数量下限，数量上限] 值 - `markerCount > 0`：开启编辑点位功能 - `markerCount === 0`：依据 marker 参数渲染点位 (只读) #### marker ```json [ // 点位1 { "lng": "", "lat": "", "address": "", "name": "" }, // 点位2 { "lng": "", "lat": "", "address": "", "name": "" } ] ```
## 绘制折线 ### 属性 | 名称 | 说明 | 类型 | 默认值 | | --------------- | ------------ | --------------------------- | ------ | | polyline[.sync] | 折线列表 | object[] | | | polylineCount | 折线数量限制 | number / [number?, number?] | `0` | #### polylineCount 类型 - `number`：数量上限 - `[number?, number?]`：[数量下限，数量上限] 值 - `polylineCount > 0`：开启编辑折线功能 - `polylineCount === 0`：依据 polyline 参数渲染折线 (只读) #### polyline ```json [ // 折线1 { // 自定义每条折线的样式 "polylineStyle": { "strokeColor": "#00B2D5" }, "path": [ { "lng": "106.627636", "lat": "26.692251" }, { "lng": "106.604633", "lat": "26.647459" }, { "lng": "106.682224", "lat": "26.658505" } ] }, // 折线2 { "polylineStyle": { "strokeColor": "#0000FF" }, "path": [ { "lng": "106.707973", "lat": "26.676606" }, { "lng": "106.688404", "lat": "26.628739" }, { "lng": "106.748486", "lat": "26.678447" } ] } ] ```
## 绘制矩形 ### 属性 | 名称 | 说明 | 类型 | 默认值 | | ---------------- | -------------------- | --------------------------- | ------ | | rectangle[.sync] | 矩形 | object[] | | | rectangleCount | 矩形数量限制 | number / [number?, number?] | `0` | | rectangleImage | 嵌在矩形内的贴图链接 | string / string[] | | #### rectangleCount 类型 - `number`：数量上限 - `[number?, number?]`：[数量下限，数量上限] 值 - `rectangleCount > 0`：开启编辑矩形功能 - `rectangleCount === 0`：依据 rectangle 参数渲染矩形 (只读) #### rectangle ```json [ // 矩形1 { "image": "贴图链接", "southwest": { "lng": "经度", "lat": "纬度" }, // 西南角坐标（兼容东南角） "northeast": { "lng": "经度", "lat": "纬度" } // 东北角坐标（兼容西北角） }, // 矩形2 { "image": "贴图链接", "southwest": { "lng": "经度", "lat": "纬度" }, // 西南角坐标（兼容东南角） "northeast": { "lng": "经度", "lat": "纬度" } // 东北角坐标（兼容西北角） } ] ```
## 绘制多边形 ### 属性 | 名称 | 说明 | 类型 | 默认值 | | -------------- | -------------- | --------------------------- | ------ | | polygon[.sync] | 多边形列表 | object[] | | | polygonCount | 多边形数量限制 | number / [number?, number?] | `0` | #### polygonCount 类型 - `number`：数量上限 - `[number?, number?]`：[数量下限，数量上限] 值 - `polygonCount > 0`：开启编辑多边形功能 - `polygonCount === 0`：依据 polygon 参数渲染多边形 (只读) #### polygon ```json [ // 多边形1 { "path": [ { "lng": "106.44294", "lat": "26.644338" }, { "lng": "106.431267", "lat": "26.504937" }, { "lng": "106.569282", "lat": "26.585405" } ] }, // 多边形2 { "path": [ { "lng": "106.623527", "lat": "26.52767" }, { "lng": "106.602241", "lat": "26.415188" }, { "lng": "106.721031", "lat": "26.472979" } ] } ] ``` ### rangeLimit 限制点位和其他内容的绘制范围，超出范围弹窗提测,可以传入函数自定义处理或者传入对象配置 #### 传入函数 function 函数需要为 Promise 风格，函数参数为 points ，验证的点位数组，验证通过时返回 Promise.resolve()，验证未通过时返回 Promise.reject()。 ### 传入对象 object ```json { "southwest": { "lng": "经度", "lat": "纬度" }, // 西南角坐标（兼容东南角） "northeast": { "lng": "经度", "lat": "纬度" }, // 东北角坐标（兼容西北角） "prompt": "" // 验证未通过时的提醒（可选），默认为（绘制内容超出限制范围） } ```
## 事件 | 名称 | 说明 | 回调参数 | | ------- | ---------------------------------------------------------------------------------------------------- | -------- | | load | 高德地图加载完成时，即 [AMapLoader.load().then](https://lbs.amap.com/api/jsapi-v2/guide/abc/load/) | `AMap` | | error | 调用高德 API 报错时，含 [AMapLoader.load().catch](https://lbs.amap.com/api/jsapi-v2/guide/abc/load/) | 同高德 | | confirm | 点击确认按钮时 | | | cancel | 点击取消按钮时 | | | ... | `el-dialog` 的事件 | |
## 坐标系统高德、腾讯地图通用的 GCJ-02
## 坐标值数据类型 number 和 string 都能接收，但返回时，由于 JS 的 number 类型存在精度丢失问题，故返回 string
## 高德 JS-API 版本 1.4.15 > 2.0 存在诸多问题，性能也不如 1.x，等待后续更新
## 命名为什么不使用全称 longitude 和 latitude？ - 高德自己的 API 也没有完全统一，有的用简称有的用全称，coord-picker 为方便起见统一使用简称 lng 和 lat - 如果命名 / 格式与你所需不一致，可考虑二次封装
## 升级日志 ### v0.8.14 feat: 点位支持配置显示名称 ### v0.8.13 feat: 支持配置每条折线的样式 ### v0.8.12 fix: 兼容v2.0版本API ### v0.8.10 fix: 解决 markerCount 失效问题 feat: 支持配置 polylineStyle、labelMarkerStyle ### v0.8.9 支持直接 mapType 参数，可直接显示地图面板，而不用嵌入弹窗中，支持同页面同时显示多个地图面板 --- _Source: https://npm.io/package/coord-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._