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://unpkg.com/element-ui/lib/theme-chalk/index.css" />
  </head>

  <body>
    <div id="app">
      <coord-picker show :load-options="loadOptions"></coord-picker>
    </div>
    <script src="https://unpkg.com/vue@2"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/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
rangeLimit	限制绘制内容范围	function / object	undefined

⚠ 在打开 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" }
    ]
  }
]

rangeLimit

限制点位和其他内容的绘制范围，超出范围弹窗提测,可以传入函数自定义处理或者传入对象配置

传入函数function

函数需要为Promise风格，函数参数为 points ，验证的点位数组，验证通过时返回 Promise.resolve()，验证未通过时返回 Promise.reject()。

传入对象object

{
  southwest: { "lng": "经度", "lat": "纬度" }, // 西南角坐标（兼容东南角）
  northeast: { "lng": "经度", "lat": "纬度" }, // 东北角坐标（兼容西北角）
  prompt: ''// 验证未通过时的提醒（可选）， 默认为（绘制内容超出限制范围）
}

事件

名称	说明	回调参数
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。

coord-picker