VUE 点击百度地图获取经纬度及地址信息

1、安装组件

npm install vue-baidu-map --save

2、注册组件

import {BaiduMap,BmNavigation,BmView,BmGeolocation,BmCityList} from 'vue-baidu-map'
    export default {
        name: "mapDialog",
        components: {
            BaiduMap,
            BmNavigation,
            BmView,
            BmGeolocation,
            BmCityList
        },
        data () {
            return {
                center: {lng: 121.833138, lat: 39.081725},
                zoom: 12,
                mapVisible:false,
                locData:{
                    longitude:'',
                    latitude:'',
                    address:'',
                },
                clientHeight:document.documentElement.clientHeight-90, // 屏幕高度
                iconUrl:'icon/map_marker_check.png',
            }
        },
        methods: {
            handler ({BMap, map}) {
                let _this = this;	// 设置一个临时变量指向vue实例，因为在百度地图回调里使用this，指向的不是vue实例；
                var geolocation = new BMap.Geolocation();
                geolocation.getCurrentPosition(function(r){
                    console.log(r);
                    _this.center = {lng: r.longitude, lat: r.latitude};		// 设置center属性值
                    _this.autoLocationPoint = {lng: r.longitude, lat: r.latitude};		// 自定义覆盖物
                    _this.initLocation = true;
                },{enableHighAccuracy: true})

                window.map = map;
            },
            //点击地图监听
            clickEvent(e){
                map.clearOverlays();
                let Icon_0 = new BMap.Icon("icon/map_marker_check.png", new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 36)});
                var myMarker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat),{icon: Icon_0});
                map.addOverlay(myMarker);
                //用所定位的经纬度查找所在地省市街道等信息
                var point = new BMap.Point(e.point.lng, e.point.lat);
                var gc = new BMap.Geocoder();
                let _this = this;
                gc.getLocation(point, function (rs) {
                    var addComp = rs.addressComponents;
                    //console.log(rs.address);//地址信息
                    _this.locData.address = rs.address;

                });
                this.locData.longitude = e.point.lng;
                this.locData.latitude = e.point.lat;
            },
            //定位成功回调
            getLoctionSuccess(point, AddressComponent, marker){
                map.clearOverlays();
                let Icon_0 = new BMap.Icon("icon/map_marker_check.png", new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 36)});
                var myMarker = new BMap.Marker(new BMap.Point(point.point.lng, point.point.lat),{icon: Icon_0});
                map.addOverlay(myMarker);
                this.locData.longitude = point.point.lng;
                this.locData.latitude = point.point.lat;
            },
            findlocation(){
                this.$emit("findlocdata",this.locData)
                this.mapVisible = false
            },
            mapShow(){
                this.mapVisible = true
            },
        },
        mounted() {

        }

    }

 3、页面代码

 4、展示效果

5、资源网址 

https://dafrok.github.io/vue-baidu-map/#/zh/index