这是官网地址
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'
})