在网上观看了大多数实现城市定位的方法,发现大部分都不能实现或者不够详细
以下是整理出实现的方法
1.申请你自己的密钥
登录成功后到控制台
这里关键的是选择你的应用类型,比如你是在浏览器端访问就选浏览器端,是什么就选择什么,如果选择错了引入的时候会报错
白名单:只有该白名单中的网站才能成功发起调用
格式:*.mysite.com*,*myapp.com* 多个域名之间请用英文半角逗号隔开
如果不想对任何域名做限制,设置为英文半角星号*(谨慎使用,前端代码容易泄露AK,被其他网站非法调用,上线前可以用作Debug,线上正式ak请设置合理的Referer白名单)新申请的Mobile类型的ak与新申请的Browser类型的ak不再支持云存储接口的访问,如要使用云存储,请申请server类型ak
提交之后就获得了你自己的AK
2. 在index.html中引入
这里的密钥要改为刚刚申请到的AK
<!-- 获取地理位置百度 -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>
3.在build下的webpack.base.conf.js中添加与entry平级的externals
externals: {
"BMap": 'BMap'
},
4.终端重新运行一下
npm install
5.在需要定位的页面中引入
import BMap from "BMap";
6.实现功能
template中添加
<div>{{ LocationCity }}</div>
data中注册LocationCity
data() {
return {
musicTypeJSON: {},
searchValue: "",
result: [],
titleTypeJSON: {}, //热门城市
LocationCity: "正在定位...", //一个初始值
};
},
methods中创建方法
city() {
//定义获取城市方法
const geolocation = new BMap.Geolocation();
var _this = this;
geolocation.getCurrentPosition(
function getinfo(position) {
let city = position.address.city; //获取城市信息
let province = position.address.province; //获取省份信息
console.log(position);
_this.LocationCity = city;
},
function (e) {
_this.LocationCity = "定位失败";
},
{ provider: "baidu" }
);
}
页面渲染后在mounted(){}中调用方法
mounted() {
this.city(); //触发获取城市的方法
}