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 层。