@lemonyc/map-viewer

lemonyc 组件库 · Vue 3 组件包

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

• 通过 uiLib prop 切换 element-plus（ElDialog）或 ant design vue（a-modal）弹框
• mapKey / securityJsCode 通过 prop 传入，无需依赖环境变量
• 单点 / 多点预览；markerLabel 可单独配置
• 多个点位时自动 setFitView 自适应视野
• 与原项目示例一致的 v-model:visible / position / markerLabel 交互

安装

npm install @lemonyc/map-viewer

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

npm install vue

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

npm install element-plus  # 或 ant-design-vue
npm install @amap/amap-jsapi-loader

快速开始

使用 element-plus 弹框（默认）

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

  <MapViewer
    v-model:visible="visible"
    :position="[121.45, 31.18]"
    marker-label="测试点位"
    :map-key="MAP_KEY"
    :security-js-code="MAP_SECURITY"
  />
</template>

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

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

使用 ant design vue 弹框

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

  <MapViewer
    v-model:visible="visible"
    :position="[
      [121.45, 31.18],
      [121.50, 31.20],
    ]"
    :marker-label="['点位 A', '点位 B']"
    :map-key="MAP_KEY"
    :security-js-code="MAP_SECURITY"
    ui-lib="antd"
  />
</template>

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

const visible = ref(false)
const MAP_KEY = '你的高德 JS API Key'
const MAP_SECURITY = '你的安全密钥'
</script>

API

Props

| 属性 | 类型 | 默认值 | 必填 | 说明 | |------|------|--------|------|------| | mapKey | String | — | ✅ | 高德地图 JS API Key | | securityJsCode | String | — | ✅ | 高德地图安全密钥 | | uiLib | 'element-plus' \| 'antd' | 'element-plus' | — | 弹框 UI 库 | | v-model:visible | Boolean | false | — | 控制弹框显隐 | | position | Array | [] | — | [lng, lat] 或 [[lng,lat], ...] | | markerLabel | String \| Array | '' | — | 标签内容；多点时按顺序对应 position | | title | String | '经纬度预览' | — | 弹框标题 | | width | Number | 800 | — | 弹框宽度（px） | | zoom | Number | 15 | — | 地图缩放等级（多点时会自动 setFitView） | | defaultCenter | Array | [113.846315, 34.083243] | — | position 为空时的默认中心 | | viewMode3D | Boolean | true | — | 是否 3D 视图 | | plugins | Array | ['AMap.MarkerClusterer'] | — | 加载的地图插件 | | autoOpen | Boolean | true | — | 组件挂载时是否自动打开弹框 |

暴露方法（通过 ref 调用）

| 方法 | 说明 | |------|------| | initMapViewer() | 重新初始化地图 |

License

MIT