Vue2使用百度地图——vue-baidu-map

vue-baidu-map是百度开发者平台已经封装了基于vue的地图组件，相比于原生百度地图API，使用起来更加简便。

安装

npm install vue-baidu-map --save

全局注册

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
ak: 'YOUR_APP_KEY'
})

其中ak需要你到百度地图开发者平台申请。

使用地图容器

<baidu-map class="bm-view" :center='center' :zoom='zoom' :scroll-wheel-zoom="true"
 :mapClick="false">

其中:center是中心点，需要动态绑定经纬度（center: {lng: 0,lat: 0}, //中心点经纬度），:zoom是缩放等级，:scroll-wheel-zoom是是否启用滚动缩放(默认是false)，:mapClick是是否启用点击地点后显示地点详细信息（默认是true），最后bm-view需要设置宽高。

返回百度地图的核心类和地图实例

 需要在<baidu-map>标签里绑定一个点击事件，可以使用在ready事件中使用返回的BMap类和map实例进行手动控制。

handler({BMap,map}) {
				// console.log(BMap, map) //地图组件渲染完毕时触发，返回一个百度地图的核心类和地图实例
				let _this = this //设置一个临时变量指向vue实例，因为在百度地图回调里使用this，指向的不是vue实例
				this.BMap = BMap //将BMAP类和map实例赋值给变量BMAP和map
				this.map = map
			}

 获取地址

需要在<baidu-map>标签里绑定一个点击事件。

let geocoder = this.BMap.Geocoder(); //创建地址解析器的实例
				geocoder.getLocation(e.point, rs => {
					// this.address = rs.address    //赋值给变量address
					// console.log(rs.address);    //这里打印可以看到里面的详细地址信息，可以根据需求选择想要的
					// console.log(rs.addressComponents);//结构化的地址描述(object)
					// console.log(rs.addressComponents.province); //省
					// console.log(rs.addressComponents.city); //城市
					// console.log(rs.addressComponents.district); //区县
					// console.log(rs.addressComponents.street); //街道
					// console.log(rs.addressComponents.streetNumber); //门牌号
					// console.log(rs.surroundingPois); //附近的POI点(array)
					// console.log(rs.business); //商圈字段，代表此点所属的商圈(string)