BizMapPicker 地图选点

高德 JSAPI 2.0 运行时 CDN 按需加载（零 npm 依赖）：点击选点 + 关键字搜索（PlaceSearch）+ 逆地理编码回填地址（Geocoder）+ 标记拖拽；无 Key / 内网不可达时给出可操作提示而非白屏。门店定位、收货地址选点、围栏标点。

需准备高德开放平台 Key

本组件无 npm 依赖，但需高德开放平台账号：

1. 高德控制台 创建应用，申请 Web端(JS API) Key，传入 app-key；
2. 2021-12 之后申请的 Key 需配套 security-js-code（安全密钥）；
3. 生产环境建议为 Key 配置域名白名单，更安全的做法是经 nginx 代理转发 JSAPI；
4. 内网 / 海外环境无法访问 webapi.amap.com，组件将进入提示态（不白屏）。

基础选点

仅本地演示用，不回传

输入 Key 后点击地图选点，逆地理自动带出地址。

<script setup lang="ts">
/** 场景：门店选址——输入高德 Key 后点击地图选点，逆地理自动带出地址 */
import { ref } from 'vue'
import { ElInput } from 'element-plus'
import { BizMapPicker } from 'vue3-ep-biz-lib'
import type { BizMapLocation } from 'vue3-ep-biz-lib'

const appKey = ref('')
const location = ref<BizMapLocation | null>(null)
</script>

<template>
  <div style="max-width: 640px">
    <div style="margin-bottom: 10px; display: flex; gap: 8px; align-items: center">
      <ElInput
        v-model="appKey"
        placeholder="粘贴你的高德 Web端(JS API) Key"
        style="width: 300px"
        clearable
      />
      <span style="font-size: 12px; color: var(--el-text-color-placeholder)">仅本地演示用，不回传</span>
    </div>
    <BizMapPicker :app-key="appKey" v-model="location" :height="300" />
  </div>
</template>

显示代码

收货地址表单

收货人

选择位置

详细地址

选点回填经纬度与地址文本。

<script setup lang="ts">
/** 场景：收货地址表单——选点回填经纬度与地址文本 */
import { ref } from 'vue'
import { ElForm, ElFormItem, ElInput } from 'element-plus'
import { BizMapPicker } from 'vue3-ep-biz-lib'
import type { BizMapLocation } from 'vue3-ep-biz-lib'

const appKey = ref('')
const location = ref<BizMapLocation | null>(null)
const receiver = ref('')
</script>

<template>
  <div style="max-width: 640px">
    <ElForm label-width="90px">
      <ElFormItem label="收货人">
        <ElInput v-model="receiver" style="width: 260px" placeholder="姓名" />
      </ElFormItem>
      <ElFormItem label="选择位置">
        <BizMapPicker :app-key="appKey" v-model="location" :height="260" />
      </ElFormItem>
      <ElFormItem label="详细地址">
        <ElInput
          :model-value="location?.address ?? ''"
          type="textarea"
          :rows="2"
          placeholder="选点后自动带出，可补充楼栋门牌"
        />
      </ElFormItem>
    </ElForm>
    <ElInput v-model="appKey" placeholder="粘贴高德 Key 后地图加载" style="width: 300px; margin-top: -10px" clearable />
  </div>
</template>

显示代码

初始视角

center / zoom 定位目标城市。

<script setup lang="ts">
/** 场景：初始视角——center / zoom 定位到目标城市 */
import { ref } from 'vue'
import { ElInput } from 'element-plus'
import { BizMapPicker } from 'vue3-ep-biz-lib'

const appKey = ref('')
</script>

<template>
  <div style="max-width: 640px">
    <BizMapPicker :app-key="appKey" :center="[114.057868, 22.543099]" :zoom="16" :height="280" />
    <ElInput v-model="appKey" placeholder="粘贴高德 Key（初始视角：深圳市中心 16 级）" style="width: 320px; margin-top: 10px" clearable />
  </div>
</template>

显示代码

纯点选模式

关闭搜索与标记拖拽。

<script setup lang="ts">
/** 场景：纯点选——关闭搜索框、关闭标记拖拽（精细点选作业） */
import { ref } from 'vue'
import { ElInput } from 'element-plus'
import { BizMapPicker } from 'vue3-ep-biz-lib'

const appKey = ref('')
</script>

<template>
  <div style="max-width: 640px">
    <BizMapPicker :app-key="appKey" :searchable="false" :draggable="false" :height="280" />
    <ElInput v-model="appKey" placeholder="粘贴高德 Key（纯地图点选模式）" style="width: 320px; margin-top: 10px" clearable />
  </div>
</template>

显示代码

安全密钥

生产建议：Key 配置域名白名单（高德控制台）；securityJsCode 仅前端方案，更安全做法是 nginx 代理转发

security-js-code 配套传入（配合控制台域名白名单）。

<script setup lang="ts">
/** 场景：安全密钥——2021-12 后申请的 Key 需配 securityJsCode（配合控制台域名白名单） */
import { ref } from 'vue'
import { ElAlert, ElInput } from 'element-plus'
import { BizMapPicker } from 'vue3-ep-biz-lib'

const appKey = ref('')
const securityCode = ref('')
</script>

<template>
  <div style="max-width: 640px">
    <div style="display: flex; gap: 8px; margin-bottom: 10px">
      <ElInput v-model="appKey" placeholder="appKey" style="width: 240px" clearable />
      <ElInput v-model="securityCode" placeholder="securityJsCode（安全密钥）" style="width: 260px" clearable />
    </div>
    <BizMapPicker :app-key="appKey" :security-js-code="securityCode" :height="260" />
    <ElAlert
      style="margin-top: 10px"
      type="info"
      :closable="false"
      show-icon
      title="生产建议：Key 配置域名白名单（高德控制台）；securityJsCode 仅前端方案，更安全做法是 nginx 代理转发"
    />
  </div>
</template>

显示代码

降级状态

内网 / 海外环境访问不到 webapi.amap.com 时同样进入该提示态；Key 后补输入后地图自动重试加载。

无 Key / 网络不可达时的可操作提示。

<script setup lang="ts">
/** 场景：降级状态——无 Key / 网络不可达时的可操作提示（不白屏） */
import { BizMapPicker } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 640px">
    <BizMapPicker app-key="" :height="240" />
    <p style="margin-top: 8px; font-size: 13px; color: var(--el-text-color-secondary)">
      内网 / 海外环境访问不到 webapi.amap.com 时同样进入该提示态；Key 后补输入后地图自动重试加载。
    </p>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
app-key	string	''	高德 Web端(JS API) Key（必填）
security-js-code	string	''	安全密钥（新版 Key 必配）
center	[number, number]	北京	初始中心点 [lng, lat]
zoom	number	14	初始缩放级别
searchable	boolean	true	关键字搜索框
draggable	boolean	true	标记可拖拽
height	number	320	地图高度（px）
disabled	boolean	false	禁用

v-model

类型	说明
BizMapLocation | null	{ lng, lat, address } 选点结果

Expose

名称	类型	说明
getMap	() => BizAmapMap | null	获取地图实例（叠加覆盖物等高级用法）
locate	() => void	回到当前选点