百度地图调用参考:逆地理编码 rgc 反geo检索 | 百度地图API SDK
axios ,jsonp 参考:使用VUE的axios解决调用百度地图api的跨域访问问题_樱小诺的博客-CSDN博客_百度地图api 跨域
直接请求会报跨域错误
axios({
url: "https://api.map.baidu.com/reverse_geocoding/v3/?ak=1hKv9tskwuH6cUZ4v7z1X2DDCpQdhGGw&output=json&coordtype=wgs84ll&location="+lat+","+lon,
method: "get"
}).then(res => {
alert(res.result.formatted_address)
});
改用 jsonp
axios.jsonp = (url) => {
if(!url){
console.error('Axios.JSONP 至少需要一个url参数!')
return;
}
return new Promise((resolve,reject) => {
window.jsonCallBack =(result) => {
resolve(result)
}
var JSONP=document.createElement("script");
JSONP.type="text/javascript";
JSONP.src=`${url}&callback=jsonCallBack`;
document.getElementsByTagName("head")[0].appendChild(JSONP);
setTimeout(() => {
document.getElementsByTagName("head")[0].removeChild(JSONP)
},500)
})
}
axios.jsonp(
"https://api.map.baidu.com/reverse_geocoding/v3/?ak=1hKv9tskwuH6cUZ4v7z1X2DDCpQdhGGw&output=json&coordtype=wgs84ll&location="+lat+","+lon,
).then(res => {
alert(res.result.formatted_address)
});