一、安装

$ npm install vue-baidu-map --save

二、注册

　　　注册的方式有两种 ： 全局注册 & 局部注册 ，各位可以根据自己的需求来选择，我个人采用的是局部注册，按需加载。个人注册了一个公共的MapView.vue组件来实现地图的功能，存放在项目组件库components/common下。

　　　官方文档描述1：局部注册的 BaiduMap 组件必须声明 ak 属性。

　　　　　注: 这个ak指的是你的百度地图开放平台获取到的秘钥

　　　官方文档描述2：所有的独立组件均存放在 vue-baidu-map/components 文件夹下，按需引用即可。

　　　　　刚开始，我就是被这句话给迷惑了，由于没认真看文档，又看到代码，傻傻的去组件库components中新建了一个vue-baidu-map文件夹，然后去注册了一个Map.vue的组件。

　　　　　No~No~No~ 不是这样的。注意：这里指的是vue-baid-map文件夹下的components组件库，而不是我们项目中自己创建的components组件库，不要跟我一样犯傻。

　　在安装完vue-baidu-map后，在node_modules中会有一个vue-baidu-map文件夹，我们现在来找到它，它的结构是这样的：

　　　　vue-baidu-map

　　　　　　|__ .github

　　　　　　|__ build

　　　　　　|__ components

　　　　　　|__ test

　　　　　　|__ types

　　看到了吗？ 这里有个components组件库，而官方描述中叫我们引入的是这个文件下的独立组件。

三、实现

　　　　现在我们来看看代码。

　　　　在个人注册的组件MapView.vue中来实现地图功能，

<template>

<baidu-map class="map" :center="center" :zoom="zoom" @ready="handler"></baidu-map>

　　<!-- baidu-map指的既是BaiduMap组件 -->

</template>

<script>

import BaiduMap from 'vue-baidu-map/components/Map/Map.vue'

export default {

data () {

return {

center: {lng: 0, lat: 0}, //经纬度

zoom: 3　 //地图展示级别

}

},

　　components: {

　　　　BaiduMap //指定组件模板

　　},

methods: {

handler ({BMap, map}) {

console.log(BMap, map)

this.center.lng = 116.404

this.center.lat = 39.915

this.zoom = 15

}

}

}

</script>

<style lang="less" scoped>

.map {

　　width: 100%;

　　height: 500px; //必须给容器指高度，要不然地图将显示在一个高度为0的容器中，自然看不到

　　/deep/ .anchorBL {　　//隐藏左下角百度地图logo

　　　　display: none;

　　}

}

</style>

实现的效果图:

文章内容就到此结束了。有什么不对的地方、不同的意见或者建议可以在评论区告知。