地图获取城市编码vue-jsonp请求，处理跨域

场景：在开发地图选点中，后端需要adcode城市编码，这个需求需要根据经纬度进行转化（用的百度地图，其他地图请参考）

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

第一步我们需要安装npm install vue-jsonp -save

第二步 在main.js中

import { VueJsonp } from 'vue-jsonp'   //注这里必须用{ }包裹否者会报错。

Vue.use(VueJsonp)

 

第三不 在data中声明 

cityUrl变量 

cityUrl: 'https://api.map.baidu.com/reverse_geocoding/v3/?ak=改成自己的地图密码&output=json&coordtype=wgs84ll&location=',   //（location接收经纬度参数）

//参考 https://api.map.baidu.com/reverse_geocoding/v3/?ak=改成自己的地图密码&output=json&coordtype=wgs84ll&location=32.145572,118.745663

第四具体代码

            // 获取城市编码

            let surl = this.cityUrl + e.point.lat + ',' + e.point.lng

            console.log(surl)

            this.$jsonp(surl).then(res => {

                // console.log(res.result.addressComponent.adcode)

                this.form.adCode = res.result.addressComponent.adcode

            })

 

如有帮助请关注