配置

本章节将为你讲述如何配置 ak、apiUrl 与插件以及更换资源链接，并实现一个自定义插件

配置方式

目前支持两种方式，全局配置和组件 props 传入

TIP

如果你是全局注册使用方式，那么 ak、apiUrl、plugins 和 pluginsSourceLink 都支持两种来源 (全局注册配置和组件 props 提供)，当同时指定的时候，会优先就近原则，从组件 props 中获取。如果全局注册配置和组件 props 都提供了，则会尝试合并两个配置。

如果你是按需加载使用方式，则只支持组件 props 方式

1。通过全局注册配置 ak 与插件

全局注册 Options

属性	说明	类型	可选值	默认值	版本
ak	百度地图 ak	string	-	-	-
apiUrl	自建地图 api 资源地址（一般用于离线地图）	string	-	-	^2.3.0
plugins	需要注册的插件	PluginId[]	-	-	-
pluginsSourceLink	自定义插件资源地址	Record<PluginId, string>	-	-	-

import { createApp } from 'vue'
import App from './App.vue'
import baiduMap from 'vue3-baidu-map-gl'

const app = createApp(App)
app.use(baiduMap, {
  ak: '百度地图ak',
  plugins: ['TrackAnimation']
})
app.mount('#app')

2。组件 BMap 传入 props 配置

<BMap
  ak='百度地图ak'
  :plugins="['TrackAnimation']"
/>

扩展插件 plugins

配置插件，通过 BMap 组件 pluginReady 可获取加载好的插件类

PluginId	插件名称	描述	版本
TrackAnimation	视角轨迹动画	TrackAnimation 类提供视角轨迹动画展示效果。
Mapvgl		-
MapvglThreeLayers		-
Mapv		-
MapvThree		-
DrawingManager	鼠标绘制工具条库	提供鼠标绘制点、线、面、多边形（矩形、圆）的编辑工具条的开源代码库。	^2.5.0
DistanceTool	测距工具	测距工具类	^2.5.0
GeoUtils	几何运算	提供若干几何算法	^2.5.0
AreaRestriction	区域限制	浏览区域限制类	^2.5.0
InfoBox	自定义信息窗口	类似于 infoWindow，比 infoWindow 更有灵活性，比如可以定制 border，关闭按钮样式等。	^2.5.0
RichMarker	富标注	富 Marker 类	^2.5.0
LuShu	路书	路书类，实现 Marker 沿路线运动	^2.5.0

更换插件资源链接

如果需要自建或其他地址的资源链接，则可以通过该方式自定义。同样，该方式也支持两种形式：

// ...
app.use(baiduMap, {
  plugins: ['TrackAnimation'],
  pluginsSourceLink: {
    TrackAnimation: '自建或其他地址的资源链接'
  }
})
// ...

或者

<BMap
  :plugins=['TrackAnimation']
  :pluginsSourceLink="{
    TrackAnimation: '自建或其他地址的资源链接'
  }"
/>

自定义资源加载插件

除了提供的插件外，你还可以通过自定义插件扩展，自定义的插件将在地图加载完毕后执行与处理。

自定义的方式也很简单，你只需定义一个返回 Promise 的函数即可

const customPlugin = () => {
  return new Promise((resolve) => {
    console.log('自定义插件')
    // 加载相关资源
    // 加载完成后可 resolve 一个对象, 插件名和插件所导出的类, 便于通过 pluginRead 更好的访问
    resolve({
      // [pluginName]: pluginClass
    })
  })
}

使用的方式同样也有两种：

// ...
app.use(baiduMap, {
  plugins: [customPlugin]
})
// ...

或者

<BMap :plugins="[customPlugin]" />