初始化


完整导入

一般项目中,对于 vue-bmap-gl 的初始化只需要调用 initBMapApiLoader 方法即可。

NPM 安装:

import App from './App.vue'
import VueBMap, {initBMapApiLoader} from 'vue-bmap-gl';
import 'vue-bmap-gl/dist/style.css'
initBMapApiLoader({
    ak: 'YOUR_KEY'
})

createApp(App)
    .use(VueBMap)
    .mount('#app')

1
2
3
4
5
6
7
8
9
10
11

CDN 引入:

window.VueBMap.initBMapApiLoader({
  ak: 'YOUR_KEY',
});
1
2
3

自动导入

首先你需要安装unplugin-vue-componentsunplugin-auto-import@vuemap/unplugin-resolver这三款插件

npm install -D unplugin-vue-components unplugin-auto-import @vuemap/unplugin-resolver
1

然后在main.ts中导入css和进行初始化key

import App from './App.vue'
import {initBMapApiLoader} from 'vue-bmap-gl';
import 'vue-bmap-gl/dist/style.css'
initBMapApiLoader({
    ak: 'YOUR_KEY'
})

createApp(App)
    .mount('#app')
1
2
3
4
5
6
7
8
9

再修改配置文件,把下列代码插入到你的 Vite 或 Webpack 的配置文件中

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {VueBmapGlResolver} from '@vuemap/unplugin-resolver'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [VueBmapGlResolver()],
    }),
    Components({
      resolvers: [VueBmapGlResolver()],
    }),
  ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

警告

当项目中Element-Plus也使用自动导入功能时会与地图组件冲突,需要使用unplugin-vue-components@0.17.15之后的版本

使用Element-plus的自动导入时,配置需要修改为如下:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import {VueBmapGlResolver} from '@vuemap/unplugin-resolver'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver({
        exclude: /^ElBmap[A-Z]*!/
      }),VueBmapGlResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver({
        exclude: /^ElBmap[A-Z]*!/
      }),VueBmapGlResolver()],
    }),
  ]
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Promise

定制化程度较高的项目中,开发者可能只想通过 vue-bmap-gl 引入高德地图,而部分实例化的操作直接基于高德地图的 sdk 完成。这个时候就需要 lazyBMapApiLoaderInstance

NPM 安装:

import VueBMap, {initBMapApiLoader} from 'vue-bmap-gl';
import { lazyBMapApiLoaderInstance } from 'vue-bmap-gl';

initBMapApiLoader({
  ak: 'YOUR_KEY',
});

createApp(App)
    .use(VueBMap)
    .mount('#app')

lazyBMapApiLoaderInstance.load().then(() => {
  // your code ...
  this.map = new BMapGL.Map('bmapContainer', {
    center: new BMapGL.Point(121.59996, 31.197646)
  });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

CDN 引入:

window.VueBMap.initBMapApiLoader({
  ak: 'YOUR_KEY',
});

window.VueBMap.lazyBMapApiLoaderInstance.load().then(() => {
  // your code ...
  this.map = new BMapGL.Map('bmapContainer', {
    center: new BMapGL.Point(121.59996, 31.197646)
  });
});
1
2
3
4
5
6
7
8
9
10

参数

参数名类型默认值描述
akString''百度 Key
vString1.0SDK 版本
pluginsString''BMapGLLib扩展库,以逗号隔开,可使用的扩展见下面列表。gitee地址open in new window

扩展库列表

库名描述
DrawingManager鼠标绘制工具条库open in new window
DistanceTool测距工具open in new window
GeoUtils测距工具open in new window
TrackAnimation视角轨迹动画open in new window
AreaRestriction区域限制open in new window
InfoBox自定义信息窗口 顶部展示示例open in new window 底部展示示例open in new window
RichMarker富标注 示例1open in new window 示例2open in new window
Lushu路书open in new window
最后更新时间:
贡献者: guyangyang