@lemonyc/map-picker

lemonyc 组件库 · Vue 3 组件包

基于 Vue 3 + 高德地图（AMap JS API 2.0）的经纬度选择弹框组件。支持：

• 通过 uiLib prop 切换 element-plus（ElDialog）或 ant design vue（a-modal）弹框
• mapKey / securityJsCode / webApiKey 通过 prop 传入，无需依赖环境变量
• 关键字 POI 搜索（带防抖）
• 拖拽地图自动更新经纬度，可选逆地址编码自动回填地址
• 园区模式（图片图层 + 多边形遮罩）
• 与原项目示例一致的 v-model:visible / v-model:lnglat / v-model:address 交互

安装

npm install @lemonyc/map-picker

Vue 3 为 peer dependency，请确保项目中已安装：

npm install vue

并按需安装 UI 库与高德加载器、axios：

# 二选一：element-plus 或 ant design vue
npm install element-plus
npm install ant-design-vue

npm install @amap/amap-jsapi-loader axios

快速开始

使用 element-plus 弹框（默认）

<template>
  <el-button @click="visible = true">选择经纬度</el-button>

  <MapPicker
    v-model:visible="visible"
    v-model:lnglat="lnglat"
    v-model:address="address"
    :map-key="MAP_KEY"
    :security-js-code="MAP_SECURITY"
    :need-address="true"
  />
</template>

<script setup>
import { ref } from 'vue'
import MapPicker from '@lemonyc/map-picker'
import '@lemonyc/map-picker/dist/style.css'

const visible = ref(false)
const lnglat = ref('')
const address = ref('')

const MAP_KEY = '你的高德 JS API Key'
const MAP_SECURITY = '你的高德安全密钥 securityJsCode'
</script>

使用 ant design vue 弹框

<template>
  <a-button @click="visible = true">选择经纬度</a-button>

  <MapPicker
    v-model:visible="visible"
    v-model:lnglat="lnglat"
    v-model:address="address"
    :map-key="MAP_KEY"
    :security-js-code="MAP_SECURITY"
    ui-lib="antd"
    :web-api-key="WEB_API_KEY"
    :need-address="true"
  />
</template>

<script setup>
import { ref } from 'vue'
import MapPicker from '@lemonyc/map-picker'
import '@lemonyc/map-picker/dist/style.css'

const visible = ref(false)
const lnglat = ref('')
const address = ref('')

const MAP_KEY = '你的高德 JS API Key'
const MAP_SECURITY = '你的安全密钥'
const WEB_API_KEY = '你的高德 Web API Key（用于 POI / 逆地址编码）'
</script>

API

Props

| 属性 | 类型 | 默认值 | 必填 | 说明 | |------|------|--------|------|------| | mapKey | String | — | ✅ | 高德地图 JS API Key | | securityJsCode | String | — | ✅ | 高德地图安全密钥 | | uiLib | 'element-plus' \| 'antd' | 'element-plus' | — | 弹框 UI 库 | | v-model:visible | Boolean | false | — | 控制弹框显隐 | | v-model:lnglat | String | '' | — | 经纬度（"lng,lat" 字符串） | | v-model:address | String | '' | — | 地址（逆地址编码自动写回） | | title | String | '经纬度选择' | — | 弹框标题 | | width | Number | 1000 | — | 弹框宽度（px） | | needAddress | Boolean | false | — | 是否启用逆地址编码自动回填 | | isParkDevice | Boolean | false | — | 启用园区模式（图片图层 + 多边形遮罩） | | parkImageUrl | String | '/img/deviceMap/1.jpg' | — | 园区图片 URL（isParkDevice=true 时生效） | | parkBounds | Array | 内置郑州示例 | — | [[lng1,lat1],[lng2,lat2]] 园区范围 | | defaultPosition | Array | [113.8478, 33.590992] | — | 默认中心点 [lng, lat] | | defaultZoom | Number | 10 | — | 默认缩放等级 | | searchDebounce | Number | 300 | — | POI 搜索防抖（ms） | | searchPlaceholder | String | '请输入地点' | — | 搜索框占位符 | | confirmText | String | '确定' | — | 确认按钮文案 | | cancelText | String | '取消' | — | 取消按钮文案 | | viewMode3D | Boolean | true | — | 是否 3D 视图 | | plugins | Array | ['AMap.MarkerClusterer'] | — | 加载的地图插件 | | webApiKey | String | '' | — | 高德 Web API Key（POI / 逆地址编码），缺省回退到 mapKey |

暴露方法（通过 ref 调用）

| 方法 | 说明 | |------|------| | reverseGeocoding() | 基于当前 lnglat 主动触发一次逆地址编码 | | init() | 重新初始化地图（用于外部强制刷新） |

License

MIT