Map Providers 集成方案

该目录封装了一套可复用的地图选择弹窗，支持根据配置在高德与百度之间切换，并可作为 npm 包输出到多个项目中使用。

目录结构

mapProviders/
├── MapLocationDialog.vue      # 公共壳组件（自动加载 SDK、动态切换驱动）
├── index.js                   # 对外导出入口
├── utils/
│   └── sdkLoader.js           # SDK 动态加载工具
├── gaode/
│   ├── MapDialog.vue          # 高德单点/简易模式
│   └── MapDialogGd.vue        # 高德多点/高级模式
├── baidu/
│   ├── BMapDialogMarker.vue   # 百度单点/常用点模式
│   └── BMapRegionDialog.vue   # 百度区域选择模式
├── types/                     # 对外类型声明
└── vite.config.js             # Vite 库模式配置

快速使用

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

<script>
import {MapLocationDialog} from 'fxy-map-providers';

export default {
  components: {MapLocationDialog},
  data() {
    return {
      showDialog: false
    };
  },
  methods: {
    handleConfirm(payload) {
      console.log('选点结果', payload);
    }
  }
};
</script>

关键 Props

| 名称 | 说明 | 默认值 | | --- | --- | --- | | visible | 是否显示弹窗（支持 .sync / v-model:visible） | false | | provider | 地图提供方，可选 gaode / baidu | gaode | | apiKey | 对应地图的 key，会在弹窗打开时自动加载 SDK | '' | | variant | 使用的具体变体，gaode：default / multiple，baidu：default / region | default | | mapProps | 透传给具体地图组件的所有 props（如 defaultPoint、ismultiple 等） | {} | | stationListFetcher | 可选，返回常用站点列表的 Promise 函数，供高德高级模式展示 | () => Promise.resolve([]) | | sdkOptions | SDK 加载附加参数（版本、urlOverride 等） | {} | | autoLoadSdk | 是否由组件自动注入 SDK 脚本 | true |

事件：confirm, submit, cancel, error。

输出 npm 包

1. 进入 mapProviders 并执行 npm install 安装打包依赖。
2. 运行 npm run build，会使用 Vite 库模式生成 dist/map-providers.es.js / .cjs.js 以及 dist/types/index.d.ts。
3. 在同级目录执行 npm publish --access public（或推送至私有 npm 仓库）。
4. 需要重置时，可删除 dist/ 并重新执行 npm run build。

兼容策略

• Vue2：组件内部依旧使用 Options API；消费侧可直接 Vue.component(...) 注册，或配合 @vue/composition-api。
• Vue3：支持 v-model:visible 语法，MapLocationDialog 已兼容 update:visible 事件，直接按示例引入即可。
• 如果需要打包两套入口，可在打包脚本中通过不同的 build 配置输出 dist/vue2 与 dist/vue3，再配合 exports 字段按需导入。

SDK 说明

utils/sdkLoader.js 会根据 provider 自动注入对应脚本并做缓存；若项目已经自行引入，可把 autoLoadSdk 设为 false，组件就不会重复加载。

数据源适配

• gaode 高级弹窗（variant="multiple" 等）与 baidu 弹窗都支持通过 stationListFetcher（在 mapProps 中传入）动态拉取常用站点/堆场。
• 该函数返回值可以是数组，或包含 data / list 的对象：Promise<Station[]> | Promise<{data?: Station[]}>。
• 组件将自动根据返回列表绘制 Marker、下拉选项，并兼容无数据时的兜底处理。

扩展

• 在 PROVIDER_COMPONENTS 中注册更多变体即可适配不同的业务弹窗。
• 可继续抽取 hooks（如选点结果标准化）或适配其他地图（腾讯、Mapbox），只需扩展 sdkLoader 与 PROVIDER_COMPONENTS。