vue结合百度地图（vue-baidu-map）根据经纬度查询省市街道信息

该demo使用Ant Design Pro Vue

百度地图使用 vue-baidu-map 

 1 <baidu-map
 2   class="map"
 3   @ready="handler"
 4   style="height: 500px;"
 5   :center="center"
 6   :zoom="15"
 7   :map-click="false">
 8   <div>
 9     <bm-marker
10       :dragging="true"
11       animation="BMAP_ANIMATION_BOUNCE"
12       :position="center"
13       @dragend="dragend"
14     >
15     </bm-marker>
16   </div>
17 </baidu-map>

 1 methods: {
 2     handler: function ({ BMap, map }) {
 3       map.enableScrollWheelZoom(true)
 4       // map.centerAndZoom('青岛市', 13)
 5       const hide = this.$message.loading('正在获取当前省市请稍候..', 0)
 6       const _this = this
 7       const geolocation = new BMap.Geolocation()
 8       geolocation.getCurrentPosition(function (r) {
 9         setTimeout(hide, 1000)
10         console.log(r)
11         _this.center = { lng: r.longitude, lat: r.latitude }        // 设置center属性值
12         // _this.autoLocationPoint = { lng: r.longitude, lat: r.latitude }        // 自定义覆盖物
13         _this.initLocation = true
14       }, { enableHighAccuracy: true })
15 
16       window.map = map
17       // 赋值，方便调用，本节被用到
18       this.BMap = BMap
19       this.map = map
20     },
21     // 拖动结束后
22     dragend (e) {
23       this.position = e.point
24       const _this = this
25       console.log(e.point)
26       console.log(this.position)
27       const gc = new this.BMap.Geocoder()
28       gc.getLocation(e.point, function (rs) {
29         console.log(rs)
30         // var addComp = rs.addressComponents
31         // this.addr = addComp.province + ', ' + addComp.city + ', ' + addComp.district + ', ' + addComp.street + ', ' + addComp.streetNumber
32         _this.addr = rs.address
33       })
34     }