Coord Picker

坐标拾取工具。

特性

坐标拾取、绘制点位 (双向绑定坐标)
拖拉拽绘制折线 (双向绑定坐标)
拖拉拽绘制矩形、内嵌贴图的矩形 (双向绑定坐标)
拖拉拽绘制多边形 (双向绑定坐标)
覆盖物支持只读模式 & 编辑模式
支持限定覆盖物的数量上限、下限
POI 搜索、搜索关键字自动补全
根据传参情况智能初始化至合适的位置
局部注册并传参，或全局注册并传参 (vue-global-config 提供技术支持)

安装

npm i coord-picker

外置依赖

vue@2
element-ui

局部注册

<template>
  <CoordPicker v-bind="{/* 局部配置 */}" />
</template>

<script>
import CoordPicker from 'coord-picker'

export default {
  components: { CoordPicker },
}
</script>

全局注册

import CoordPicker from 'coord-picker'

Vue.use(CoordPicker, {
  // 全局配置
})

CDN + ESM

⚠ 暂不支持 (ElementUI 未提供 ESM 导出)

CDN + IIFE

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/index.css"
  >
</head>

<body>
  <div id="app">
    <coord-picker
      show
      :load-options="loadOptions"
    ></coord-picker>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <script src="https://cdn.jsdelivr.net/npm/element-ui/lib/index.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/coord-picker@0.8"></script>
  <script>
    window._AMapSecurityConfig = { serviceHost: 'xxx/_AMapService/' }

    new Vue({
      components: { CoordPicker },
      data() {
        return {
          loadOptions: {
            key: 'xxx',
          },
        }
      },
    }).$mount('#app')
  </script>
</body>

</html>

属性

这里仅列出基础参数，覆盖物的参数请在相关章节查看

名称	说明	类型	默认值
show[.sync]	开关	boolean	`false`
loadOptions	AMapLoader.load 的参数，其中 `loadOptions.key` 必传	object
mapOptions[.sync]	AMap.Map 的参数2	object
city	初始行政区	string
lng[.sync]	经度	string / number
lat[.sync]	纬度	string / number
precision	坐标精度（保留几位小数）	number	`6`
address[.sync]	地址	string
addressComponent	地址成分	object / (addressComponent: AddressComponent) => string

⚠ 在打开 coord-picker 之前，请确保所有参数已传入，为避免与用户的操作发生冲突，组件内部不会监听参数后续的变化。

city

高德 Web 服务 API 的同名参数。

可选值：指定城市的中文 (如北京)、指定城市的中文全拼 (beijing)、citycode (010)、adcode (110000)，不支持县级市。当指定城市查询内容为空时，会进行全国范围内的地址转换检索。

adcode 信息可参考城市编码表获取。

长度超过 6 位数？

组件内部做了处理，如果你传入的 city 超过 6 位数，也会以仅保留前 6 位的形式支持。

addressComponent

获取的 address 默认是包含省市区的完整地址，你可以用以下两种方式来自定义地址成分：

object

{
  "province": true, // address 中是否包含省
  "city": true, // address 中是否包含市
  "district": true // address 中是否包含区县
}

function

({ 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

[
  // 点位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

[
  // 折线1
  {
    "path": [
      { "lng": "106.627636", "lat": "26.692251" },
      { "lng": "106.604633", "lat": "26.647459" },
      { "lng": "106.682224", "lat": "26.658505" }
    ]
  },
  // 折线2
  {
    "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

[
  // 矩形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

[
  // 多边形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" }
    ]
  }
]

事件

名称	说明	回调参数
load	高德地图加载完成时，即 AMapLoader.load().then	`AMap`
error	调用高德 API 报错时，含 AMapLoader.load().catch	同高德
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
如果命名 / 格式与你所需不一致，可考虑二次封装

更新日志

各版本详细改动请参考 release notes。

Name		Name	Last commit message	Last commit date
Latest commit History 244 Commits
.github/workflows		.github/workflows
.husky		.husky
demo		demo
src		src
.commitlintrc.ts		.commitlintrc.ts
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
auto-imports.d.ts		auto-imports.d.ts
index.html		index.html
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
preview.png		preview.png
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts

License

cloydlau/coord-picker

Folders and files

Latest commit

History

Repository files navigation