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

àì夳堔傛蜴生んèń 2021-12-18 12:59 2177阅读 2赞

#### [插件官方文档地址][Link 1] ####

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

插件官方示例：  
配置插件到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>

[Link 1]: https://dafrok.github.io/vue-baidu-map/#/zh/start/installation
[Link 2]: http://lbsyun.baidu.com/apiconsole/key