vue-baidu-map 通过经纬度逆解析地址信息

1、在main.js引入vue-baidu-map，引入如下

import BaiduMap from 'vue-baidu-map'

2、引入百度地图的key值

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

3、可直接在页面引用百度地图组件

<template>
<baidu-map 
:center="{lng: 105.845335, lat: 30.198212}" //中心点
@ready="handler(105.845335,30.198212)"  //ready事件，用来执行地图 API 加载完毕后才能执行的代码，
//注意：不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。
:zoom="12"> //地图缩放比例
//在地图中心添加定位点
<bm-marker 
:position="{lng: 105.845335, lat: 30.198212}" //定位经纬度
:dragging="true" //是否允许拖拽
:icon="{url:'https://files.bailb.com/public/icon/location.png',size: {width: 38, height: 38}}"//添加自定义图标，size设置图标的大小，最好是图标多大就设置多大，图标没有缩放设置
/>
//标签
<bm-label
:position="{lng: 105.845335, lat: 30.198212}"//定位经纬度
:content="BAddress"//定位地址
:labelStyle="{background: 'linear-gradient(to right,#40baec,#5165c4)',color:'#ffffff',border:'none', padding:'2px 12px', fontSize : '14px'}"//标签样式
:offset="{width: -55, height: 25}"//偏移位置设置
/>
</baidu-map>
</template>

4、根据ready事件传递的经纬度获取详细地址信息

export default{
    
    
	data(){
    
    
		return{
    
    
			BMap:null,// 地图组件是否就绪
        	BAddress:''
		}
	},
	methods:{
    
    
		/**
       * 监听地图是否加载完成
       * */
       handler(lng,lat){
    
    
        const that = this
        var myGeo = new BMap.Geocoder();
        var pt = new BMap.Point(lng,lat);
        myGeo.getLocation(pt,function(result){
    
    
            that.BAddress = result.address; //获取到当前定位的详细地址信息
        });
      },
	}
}