vue使用百度地图插件vue-baidu-map不显示地图? 可能你要注意以下几点！

插件官方文档地址

1. 官方的话就不多说了, 这里面使用npm、yarn包管理工具自行下载
2. 这里注意百度地图开发者平台申请的密钥ak不要错误, 要用浏览器ak 详见百度开发者开放平台

插件官方示例：
配置插件到Vue中 这里在main.js中 单独的引入可以直接参照官方其他示例

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

Vue.use(BaiduMap, {
  ak: 'YOUR_APP_KEY'
})

这里如果直接使用你会发现你地图不显示, 也没有任何报错。

<template>
  <baidu-map class="bm-view">
  </baidu-map>
</template>

<style>
.bm-view {
  width: 100%;
  height: 300px;
}
</style>

这是官方的解释仔细阅读

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

正确案例：

<template>
  <baidu-map :center="center" :zoom="zoom" @ready="handler"></baidu-map>
</template>
<script>
export default {
  data () {
    return {
      center: {lng: 0, lat: 0},
      zoom: 3
    }
  },
  methods: {
    handler ({BMap, map}) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    }
  }
}
</script>