一、去百度地图开放平台注册账号,然后创建ak
二、可以再平台中找到api的文档
这里是请求的路径
http://api.map.baidu.com/location/ip?ak=您的AK&ip=您的IP&coor=bd09ll
https://api.map.baidu.com/location/ip?ak=您的AK&ip=您的IP&coor=bd09ll
参数只有ak是必填
三、如果直接用上面的路径去请求,正常情况下会出现跨域
接下来就要处理跨域问题了
跨域可以在vue项目中的config目录下的index文件中配置
proxyTable: {
"/api": {
target: "http://api.map.baidu.com", // 请求的第三方接口
changeOrigin: true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,解决跨域问题
pathRewrite: {
"^/api": "" // 替换target中的请求地址。
}
}
},
四、接下来就可以请求数据了
this.$axios
.get("/api/location/ip", {
params: {
ak: 我的ak,
coor: "bd09ll"
}
})
.then(res=>{
console.log(res);
})
.catch(err=>{
console.log(err);
});
最后会根据你的IP返回给你数据
结果示例:
{
address: "CN|北京|北京|None|CHINANET|1|None", #详细地址信息
content: #结构信息
{
address: "北京市", #简要地址信息
address_detail: #结构化地址信息
{
city: "北京市", #城市
city_code: 131, #百度城市代码
province: "北京市", #省份
},
point: #当前城市中心点
{
x: "116.39564504", #当前城市中心点经度
y: "39.92998578" #当前城市中心点纬度
}
},
status: 0 #结果状态返回码
}