vue脚手架搭建项目引用百度地图--出坑

这是官网地址

https://dafrok.github.io/vue-baidu-map/#/zh/start/installation

需要声明注意的是

• BaiduMap 组件容器本身是一个空的块级元素，如果容器不定义高度，百度地图将渲染在一个高度为 0 不可见的容器内。

• 没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。当center 属性为合法地名字符串时例外，因为百度地图会根据地名自动调整 zoom 的值。

• 由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。

一定要注意异步加载！！

<baidu-map class="map" :center="{lng: 116.404, lat: 39.915}" :zoom="15" @ready="handler">

</baidu-map>

还有就是声明要规范   main.js中

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {

// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */

ak: '你的key'

})

转载于:https://www.cnblogs.com/yuwen1995/p/9215116.html