一、清除 vue 自带多余内容
- 进入 app.vue 文件中删除下图内容
2. views 目录下删除 About.vue 文件
3. 进入 Home.vue 文件中删除下图内容
4. router 目录下进入 index.js 文件中删除下图内容
5. npm run serve 重新运行项目
二、安装配置 axios、vue-axios
终端中执行下面命令进行安装
npm install axios vue-axios
mian.js 中导入 axios、vue-axios 全局挂载
import axios from 'axios'
import VueAxios from 'vue-axios'
app.use(VueAxios, axios)
示例图：
三、百度地图开放平台创建应用
链接：百度地图开放平台
在控制台>应用管理>我的应用中创建应用
- 应用名称随便起
- 应用类型选择浏览器端
- 白名单使用
*
最后提交即可
创建完成后，在应用列表中有刚刚创建的应用，发请求时会用到 ak
链接：ip 定位服务文档
请求的地址
http://api.map.baidu.com/location/ip?ak=您的AK&ip=您的IP&coor=bd09ll //GET请求
四、在 Home.vue 中写对应的代码
<template>
<div class="home">
<p>我的地址为：{{address}}</p>
</div>
</template>
<script>
export default {
name: 'Home',
data() {
return {
address: ''
}
},
created() {
// 调用获取定位的方法
this.getAddress()
},
methods: {
getAddress() {
// http://api.map.baidu.com/location/ip?ak=您的AK&ip=您的IP&coor=bd09ll
// ak填入创建应用对应的ak，ip不需要填
this.axios.get('http://api.map.baidu.com/location/ip?ak=60guZ2jQhGPcARGkgDihcrf1L5mTGFye&coor=bd09ll').then(res => {
//打印一下请求的结果
console.log(res.data);
})
}
}
}
</script>
- 运行项目后，发现浏览器报了 CORS 跨域错误。
2. 解决跨域问题，在根目录下创建
vue.config.js 文件，进行代理设置。代码如下：
module.exports = {
// 本地开发环境配置
devServer: {
proxy: {
// 以/location开头的请求走此代理
'/location': {
target: 'https://api.map.baidu.com', //代理目标域名
ws: true,
pathRewrite: {
'^/location': '/location' //重写路径
}
}
}
}
}
在代码中就不需要域名前缀了，如图所示：
-
最后重启服务运行项目，改完 vue.config.js 代码后一定要重启服务。
-
现在已经获取到了定位信息
- 最后整理下代码，将地址显示到页面上。
完整代码
<template>
<div class="home">
<p>我的地址为：{{address}}</p>
</div>
</template>
<script>
export default {
name: 'Home',
data() {
return {
address: ''
}
},
created() {
// 调用获取定位的方法
this.getAddress()
},
methods: {
getAddress() {
// http://api.map.baidu.com/location/ip?ak=您的AK&ip=您的IP&coor=bd09ll
// ak填入创建应用对应的ak，ip不需要填
this.axios.get('/location/ip?ak=60guZ2jQhGPcARGkgDihcrf1L5mTGFye&coor=bd09ll').then(res => {
//打印一下请求的结果
console.log(res.data.content.address);
let { address } = res.data.content
this.address = address
})
}
}
}
</script>
