如何在Vue项目中使用百度地图（实践）_vue使用百度地图

如何在Vue项目中使用百度地图（实践）

百度地图在vue框架中的使用

安装

npm install vue-baidu-map --save
1

注册

全局注册

在main.js中引入百度地图

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap , {
    ak:"自己注册的ak码"
})
1
2
3
4

组件局部注册

在使用到百度地图的组件中单独引入地图（比较推荐该方式，自己项目中实际使用的也是该方式）

// 写在自己需要用到的组件中
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
1
2

使用（以局部注册为例）

• 第一步：引入百度地图组件

// 写在自己需要用到的组件中
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
1
2

• 第二步：在自己的component对象中注册该组件

 components: {
            BaiduMap
        },
1
2
3

• 第三步：在template模板中使用组件

<template>
    <baidu-map class="map"
               :center="center"               // 地图的中心点
               :zoom="zoom"                   // 缩放程度
               @ready="initMap"               // 地图初始化事件 
               :scroll-wheel-zoom="true"    // 是否支持鼠标缩放
    ></baidu-map>
</template>
1
2
3
4
5
6
7
8

• 第四步：在data中返回组件中需要用的到数据,注册初始化函数

 data () {
     return {
         center: {      // 经纬度
             lng: 0,
             lat: 0
         },
         zoom: 3,　     // 地图展示级别、
         BMap:null,      // 百度地图对象
         map:null,       // 百度地图实例
     }
 },
methods: {
    initMap ({BMap, map}) {
        this.BMap = BMap ;
        this.map = map;
        this.$set(this.center , 'lng' ,'需要传递的经纬度');
        this.$set(this.center , 'lat' ,'需要传递的经纬度'  );
        this.zoom = '地图需要进行的缩放值';
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

注意事项

• <baidu-map></baidu-map>组件在使用时,一定要给一个高度，否则高度为0，无法初始化

.map{
   width: 60%;
   height: 250px;
}
1
2
3
4

• 在使用<baidu-map></baidu-map>一定要给定一个center和zoom属性，否则地图组件不会初始化

• 即使在自己的components中注册的组件为BaiduMap,在使用template中最好也要使用<baidu-map></baidu-map>，以免出现无法初始化的问题

• 在组件的ready回调函数中会返回两个参数，一个是BMap，一个是map，BMap是当前百度地图对象，map是当前地图的实例化，所以如果使用百度地图的其他组件或者打算在实例化后进行一些操作，一定要写在ready回调中。

自己开发中踩到的坑

根据后台请求数据动态更新中心点地图无响应

• 说明：在请求到后台数据后，将坐标值传递为地图组件，但是地图在center中心点更新后无响应

• 解决方式：通过props获取到从父组件传递过来的坐标值，对坐标值进行监听，当坐标值更新后及时修改data数据中的坐标。

watch:{
    position(){
        let { lon , lat } = this.position;
        this.$set(this.center , 'lng' ,lon);
        this.$set(this.center , 'lat' ,lat);
    }
},
1
2
3
4
5
6
7

在组件中使用百度地图中的跳动子组件（同样适用于其他子组件）

• 说明：如何获取到实例对象进行子组件的调用？

• 解决方法：在ready回调函数中会有两个参数，一个是BMap,一个是map,BMap参数就是百度地图的对象，map是当前地图的实例，可以使用这两个参数像官方demo中new出新的子组件

// 带跳动标注的ready回调
initMap ({BMap, map}) {
        this.BMap = BMap ;
        this.map = map;
        let { lon , lat } = this.position;
        this.$set(this.center , 'lng' ,lon);
        this.$set(this.center , 'lat' ,lat  );
        this.zoom = 8;
        let  point = new BMap.Point(lon ,lat);
        let  marker = new BMap.Marker(point);               // 创建标注
        map.addOverlay(marker);                          // 将标注添加到地图中
        marker.setAnimation(2);                          // 跳动的动画
}
1
2
3
4
5
6
7
8
9
10
11
12
13

在ready回调函数中已经初始化了调动标注，再更新坐标值后无法更新跳动标注的问题

• 解决方法：同center的修改，监听position，当position发生变化时，除了修改center对象时，还要修改标注的初始值

// 带标注的监听事件
watch:{
    position(){
        let { lon , lat } = this.position;
        this.$set(this.center , 'lng' ,lon);
        this.$set(this.center , 'lat' ,lat);
        if (this.BMap !== null && this.map !== null){
            let  point = new this.BMap.Point(lon ,lat);
            let  marker = new this.BMap.Marker(point);      // 创建标注
            this.map.addOverlay(marker);                          // 将标注添加到地图中
            marker.setAnimation(2);                          // 跳动的动画
        }
    }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14

参考链接

• 百度地图api平台
• vue-baidu-map 官方文档