【Vue】集成百度地图

Vue 集成 百度地图

1、获取百度地图 ak 密钥
2、登录网址 https://lbsyun.baidu.com/

3、注册百度地图开放平台账号，填写认证信息，并且创建应用

安装

npm install vue-baidu-map --save
1

main.js

import BaiduMap from 'vue-baidu-map';

Vue.use(BaiduMap, {
  ak: '你的AK 密钥',
});
1
2
3
4
5

示例

注意

• BaiduMap 组件容器本身是一个空的块级元素，如果容器不定义高度，百度地图将渲染在一个高度为 0 不可见的容器内。
• 没有设置center 和 zoom 属性的地图组件是不进行地图渲染的。当center 属性为合法地名字符串时例外，因为百度地图会根据地名自动调整 zoom 的值。
• 由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。

入门 HelloWorld

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

简单封装地图

地图组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

文档地址

相关示例及其他方法可在此处查询！vue-baidu-map