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)