最近写项目的时候要集成百度地图，第一次弄没什么经验，最后使用的 Vue Baidu Map，记录一下在使用中遇到的问题，希望能帮助到大家！

使用npm 安装百度地图的依赖

$ npm install vue-baidu-map --save

在 main.js 中全局注册

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'YOUR_APP_KEY'
})

局部注册（推荐）

<template>
  //局部注册的 BaiduMap 组件必须声明 ak 属性
  <baidu-map class="map" ak="YOUR_APP_KEY">	
  </baidu-map>
</template>

<script>
//所有的独立组件均存放在 vue-baidu-map/components 文件夹下，按需引用即可
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'	
export default {
  components: {
    BaiduMap
  }
}
</script>

<style>
.map {
  width: 100%;
  height: 300px;
}
</style>

局部注册（详细介绍）

到底该如何局部注册呢，首先所有的独立组件均存放在 vue-baidu-map/components 文件夹下。项目启动后会出现 node_modules 文件夹，在该文件夹下找到vue-baidu-map/components ，如下：

1.在Vue Baidu Map中我们找到需要的功能如：

<template>
  <baidu-map class="map" center="北京">
    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
  </baidu-map>
</template>

2.然后在vue-baidu-map/components 文件夹下找到对应的组件，如下：

3.之后在需要使用的模块引入

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
// 该路径就是上面找的文件路径
import BmNavigation from 'vue-baidu-map/components/controls/Navigation.vue'

export default {
  name: 'Index',
  components: {
    BaiduMap,
    // 使用该组件
    BmNavigation
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

更多内容请参考：Vue Baidu Map