轻量封装的地图点选弹窗，基于 Vue 3 + Element Plus。支持高德、百度两套地图 SDK，支持单点、多点、区域等多种场景，可作为业务表单的地址选择器。

✨ 特性

• 🎯 一套 API，自动匹配高德/百度组件
• 🧩 variant 切换单选、多选、区域等模式
• ⚙️ 支持自定义 stationListFetcher、mapProps 等高阶扩展
• 📦 提供 loadMapSdk，可按需自动加载地图 SDK

📦 安装

npm install fxy-map-providers-vue3
# 或
yarn add fxy-map-providers-vue3

当前包直接发布源码，主项目需要能编译 node_modules/fxy-map-providers-vue3 下的 .vue/.scss。Vite/Webpack 需将该目录包含进对应 loader。

🚀 快速上手

<script setup>
import {ref} from 'vue';
import {MapLocationDialog} from 'fxy-map-providers-vue3';

const showPicker = ref(false);
const tenant = {gaodeKey: 'your-amap-key'};

const handleConfirm = (payload) => {
  console.log('confirm payload', payload);
};
</script>

<template>
  <el-button @click="showPicker = true">选择装箱地</el-button>

  <MapLocationDialog
    v-model:visible="showPicker"
    provider="gaode"
    variant="multiple"
    :api-key="tenant.gaodeKey"
    :map-props="{
      id: 'gaode-dialog',
      ismultiple: true,
      defaultPoint: {lng: 120.12, lat: 30.28}
    }"
    @confirm="handleConfirm"
    @error="(err) => console.error('SDK error', err)"
  />
</template>

MapLocationDialog Props

| Prop | 类型 | 说明 | | --- | --- | --- | | visible | Boolean | 控制弹窗显隐，支持 v-model:visible | | provider | 'gaode' \| 'baidu' | 地图供应商 | | apiKey | String | 对应地图 Key；若自定义 loadMapSdk，可留空 | | variant | String | 选择内置组件：gaode - default/single/simple 使用 MapDialog，advanced/multiple 使用 MapDialogGd；baidu - marker/single 使用 BMapDialogMarker，region/polygon 使用 BMapRegionDialog | | mapProps | Object | 透传给具体地图组件的 props（例如 id、ismultiple、stationListFetcher、defaultPoint 等）| | sdkOptions | Object | 透传给 loadMapSdk 的配置，如 version、plugins、urlOverride | | autoLoadSdk | Boolean | 是否自动调用 loadMapSdk（默认 true） | | loadingText | String | SDK 加载时的提示文案 | | componentListeners | Record<string, Function> | 附加的事件监听，内部通过 v-on="componentListeners" 透传到实际组件 |

事件

| 事件 | 说明 | | --- | --- | | update:visible | 弹窗显隐变更 | | confirm | 点击确定时触发。单选返回单个点对象，多选返回点数组 | | submit | 兼容旧版命名，同 confirm | | cancel | 点击取消时触发 | | error | SDK 加载失败或其他异常 |

🧠 mapProps 常用字段

高德单选 (variant="single")

• id: 容器 DOM id（默认 gaode-map-simple）
• defaultPoint: {lng, lat} 默认中心点

高德多选 (variant="multiple"，MapDialogGd)

• ismultiple: Boolean（多选必传 true）
• stationListFetcher: (query) => Promise<Array>，用于“常用地点”列表和地图 marker
• 其它：defaultPoint、stationListFetcher、id 等

百度 (provider="baidu")

• BMapDialogMarker：ismultiple、stationListFetcher、defaultPoint
• BMapRegionDialog：logisticsPlanInfoList、defaultLocation 等

🌐 SDK 加载

组件默认会在弹窗首次显示时调用 loadMapSdk(provider, apiKey, sdkOptions)。也可手动预加载：

import {loadMapSdk} from 'fxy-map-providers-vue3';

await loadMapSdk('gaode', 'your-key', {version: '2.0'});

sdkOptions

• version: SDK 版本
• plugins: 高德插件列表
• type: 百度 webgl / api
• urlOverride: 完全自定义加载地址

🔧 构建注意

因为当前包直接发布源码，需要：

• 在 Vite/webpack 中允许编译 node_modules/fxy-map-providers-vue3 下的 .vue/.scss
• 已安装 sass
• 项目已全局引入 Element Plus 及其样式

若希望使用打包后的产物，可以 fork 本仓库，运行 vite build --lib 输出 dist，并在 package.json 的 files 中改为发布构建结果。

🤝 贡献

欢迎提 Issue 或 PR：

1. Fork & clone
2. npm install
3. 本地在示例项目中验证
4. 提交 PR 并描述场景、截图

📄 License

MIT © Zhongtie Lianji