coord-picker
Advanced tools
坐标拾取工具。
npm i coord-picker
<template>
<CoordPicker
v-bind="{
/* 局部配置 */
}"
/>
</template>
<script>
import CoordPicker from 'coord-picker'
export default {
components: { CoordPicker }
}
</script>
import CoordPicker from 'coord-picker'
Vue.use(CoordPicker, {
// 全局配置
})
⚠ 暂不支持 (ElementUI 未提供 ESM 导出)
<!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 |
| mapType | 地图显示模式 ,可以选中在弹窗中显示还是直接显示面板关 | string | dialog -> 弹窗， panel -> 面板 |
| 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之前，请确保所有参数已传入，为避免与用户的操作发生冲突，组件内部不会监听参数后续的变化。
高德 Web 服务 API 的同名参数。
可选值：指定城市的中文 (如北京)、指定城市的中文全拼 (beijing)、citycode (010)、adcode (110000)，不支持县级市。当指定城市查询内容为空时，会进行全国范围内的地址转换检索。
adcode 信息可参考城市编码表获取。
长度超过 6 位数？
组件内部做了处理，如果你传入的 city 超过 6 位数，也会以仅保留前 6 位的形式支持。
获取的 address 默认是包含省市区的完整地址，你可以用以下两种方式来自定义地址成分：
{
"province": true, // address 中是否包含省
"city": true, // address 中是否包含市
"district": true // address 中是否包含区县
}
;({ province, city, district }) => `${province} - ${city} - ${district}`
为什么支持双向绑定？
zoom| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| marker[.sync] | 点位列表 | object[] | |
| markerCount | 点位数量限制 | number / [number?, number?] | 1 |
类型
number：数量上限[number?, number?]：[数量下限，数量上限]值
markerCount > 0：开启编辑点位功能markerCount === 0：依据 marker 参数渲染点位 (只读)[
// 点位1
{
"lng": "",
"lat": "",
"address": "",
"name": ""
},
// 点位2
{
"lng": "",
"lat": "",
"address": "",
"name": ""
}
]
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| polyline[.sync] | 折线列表 | object[] | |
| polylineCount | 折线数量限制 | number / [number?, number?] | 0 |
类型
number：数量上限[number?, number?]：[数量下限，数量上限]值
polylineCount > 0：开启编辑折线功能polylineCount === 0：依据 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[] |
类型
number：数量上限[number?, number?]：[数量下限，数量上限]值
rectangleCount > 0：开启编辑矩形功能rectangleCount === 0：依据 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 |
类型
number：数量上限[number?, number?]：[数量下限，数量上限]值
polygonCount > 0：开启编辑多边形功能polygonCount === 0：依据 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" }
]
}
]
限制点位和其他内容的绘制范围，超出范围弹窗提测,可以传入函数自定义处理或者传入对象配置
函数需要为 Promise 风格，函数参数为 points ，验证的点位数组，验证通过时返回 Promise.resolve()， 验证未通过时返回 Promise.reject()。
{
"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
1.4.15
2.0 存在诸多问题，性能也不如 1.x，等待后续更新
为什么不使用全称 longitude 和 latitude？
FAQs
Coordinates picker for AMap & TMap.
The npm package coord-picker receives a total of 21 weekly downloads. As such, coord-picker popularity was classified as not popular.
We found that coord-picker demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket CEO Feross Aboukhadijeh discusses open source security challenges, including zero-day attacks and supply chain risks, on the Cyber Security Council podcast.
Security News
Research
Socket researchers uncover how threat actors weaponize Out-of-Band Application Security Testing (OAST) techniques across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.
Security News
Research
A malicious npm campaign is targeting Ethereum developers by impersonating Hardhat plugins and the Nomic Foundation, stealing sensitive data like private keys.