Vue Baidu Map--vue引入百度地图

1.安装

npm方式安装

$ npm install vue-baidu-map --save

2.局部注册

<template>
<div class="map-content" v-if="iscollegeRole"><baidu-map class="bm-view map":ak="mapAK" :scroll-wheel-zoom="true" :center="mapData.center" :zoom="mapData.zoom":continuous-zoom="true"@ready="handler"></baidu-map></div>
</template><script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {components: {BaiduMap},data() {return {mapAK: 'XXXXXXXXXXX',//需要到百度地图官网申请akBMap:null,map:null,mapData: {//中心坐标center: { lng: 113.33, lat: 39.01 },//缩放级别,1~19zoom: 19},}},methods:{handler ({BMap, map}) {console.log(BMap, map)this.BMap = BMapthis.map = map}},
}
</script><style scope>
.map {width: 100%;height: 400px;
}
</style>

参数说明

参数	说明
ak	在百度地图api官网申请的ak
scroll-wheel-zoom	允许鼠标滚轮缩放。默认是false，若需使用，需要设为true
center	地图的中心点
zoom	放大倍数
continuous-zoom	允许无级缩放

注：

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