Vue结合百度地图Api 逆地理编码

通过点击地图上位置点获取相应的经纬度及省市区街道
HTML代码

<el-dialog :visible.sync="mapShow" style="padding:0px 0px 0px 0px; width: 1100px;margin-left: 400px"  :close-on-click-modal='false'>
                <div id="info"></div>
                <div id="info2"></div>
                <baidu-map :center=center :zoom=zoom :scroll-wheel-zoom="true" style="width:520px;height:340px;border:1px solid gray" @ready="handler" @click="getClickInfo" >
                    <!-- 必须给容器指高度，不然地图将显示在一个高度为0的容器中，看不到 -->
                    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
                    <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
                    <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
                </baidu-map>
                <!-- 因为我采用的是全局注册，所以不用再在该页面上注册components -->

                <el-button type="primary" @click="mapFuncation()">确认</el-button>
                <el-button @click="mapShow = false">取消</el-button>
            </el-dialog>

数据

				mapShow:false,
                center:"",
				zoom:"",
                j:0,
                w:0,
				mapProvince:"",
                mapCity:"",
                mapDistrict:"",
                mapStreet:"",
                cityUrl:"https://api.map.baidu.com/reverse_geocoding/v3/?ak=“你的AK”&output=json&coordtype=wgs84ll&location=",

方法

// 地图经纬度开始------------------------------------------------------
            showTrue:function(){
    
    
                // alert(1);
                this.center = "拱墅区";
                this.zoom = 13;
                this.mapShow=true;
            },
            getClickInfo(e) {
    
    
                window.console.log(JSON.stringify(e.point))
                this.j = e.point.lng;
                this.w = e.point.lat;
                document.getElementById("info").innerHTML = "经度：" + e.point.lng + "   纬度：" + e.point.lat + "</br>";
                var surl = this.cityUrl+e.point.lat+","+e.point.lng;
                Vue.jsonp(surl).then(json=>{
    
    
                    this.mapProvince = json.result.addressComponent.province;
                    this.mapCity = json.result.addressComponent.city;
                    this.mapDistrict = json.result.addressComponent.district;
                    this.mapStreet  = json.result.addressComponent.street;
                    document.getElementById("info2").innerHTML = "省：" + this.mapProvince + "    市：" + this.mapCity + "</br>"+"区：" + this.mapDistrict+ "    "+"街道："+this.mapStreet ;
                }).catch(err => {
    
    
                    var data=err;
                    var jsonData = JSON. stringify(data);
                    alert("获取位置失败"+jsonData);
                })
            },mapFuncation(){
    
    
                this.formData.longitude = this.j;
                this.formData.latitude = this.w;
                this.formData.province = this.mapProvince;
                this.formData.city = this.mapCity;
                this.formData.area = this.mapDistrict;
                this.formData.county = this.mapStreet;
                this.mapShow=false;
            },
           
            // 地图经纬度结束---------------------------------------------------------

在这里插入图片描述
正常访问百度地图API获取到的值

通过jsonp将跳转链接获取到的值返回成json解析

Vue结合百度地图Api 逆地理编码

猜你喜欢