移动端浏览器有自带的获取用户经纬度的方法,但是位置会有偏差。如果只是要个大概,就当我没说。
这里我用的是腾讯的api,直接https引用。在页面上加上
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=’你的key‘&libraries=convertor"></script>
这个地方的key需要你去腾讯开放平台申请。具体操作百度。。。。
// 腾讯
getLGTx() {
this.getLocation((success) => {
// 浏览器不支持定位
if (success.code) {
console.log("您的手机似乎不允许定位,请检查后重试");
this.$toast.fail({
duration: 5000,
message: "获取地理位置信息失败,请检查是否开启定位后刷新",
});
} else {
var lat = success.coords.latitude;
var lng = success.coords.longitude;
console.log(success, "425");
// //调用地图命名空间中的转换接口 type的可选值为 1:GPS经纬度,2:搜狗经纬度,3:百度经纬度,4:mapbar经纬度,5:google经纬度,6:搜狗墨卡托
qq.maps.convertor.translate(
new qq.maps.LatLng(lat, lng),
1,
(res) => {
console.log(res, "525");
//取出经纬度并且赋值
let latlng = res[0];
let latitude = latlng.lat; //纬度
let longitude = latlng.lng; //经度
this.surePosition(longitude, latitude);
// this.jx(latitude, longitude);
},
(err) => {
console.log(err);
}
);
}
});
},
// 腾讯地图定位转换坐标
getLocation(callback) {
//判断是否支持 获取本地位置
if (navigator.geolocation) {
var n = navigator.geolocation.getCurrentPosition(callback, (fail) => {
callback({
msg: "来自非https域名请求",
code: -2,
});
});
} else {
callback({
msg: "你的手机不支持定位",
code: -1,
});
}
},
//高德逆解析
surePosition(re0, re1) {
this.latitude = re0;
this.longtitude = re1;
const that = this;
axios
.get(
`https://restapi.amap.com/v3/geocode/regeo?key=’高德申请的key‘&location=${
re0 + "," + re1
}&poitype=&radius=1000&extensions=base&batch=false&roadlevel=0`
)
.then((response) => {
console.log("response", response);
// if (response.data.status) {
// } else {
// that.showCity = "未获取定位";
// }
this.province = response.data.regeocode.addressComponent.province; //省份
this.city = response.data.regeocode.addressComponent.city; //市
this.area = response.data.regeocode.addressComponent.district; //区县
this.street = response.data.regeocode.addressComponent.township; //街道
this.detailed =
response.data.regeocode.addressComponent.streetNumber.street +
response.data.regeocode.addressComponent.streetNumber.number; //详细路段
console.log(this.province);
console.log(this.city);
console.log(this.area);
console.log(this.street);
console.log(this.detailed);
console.log("纬度latitude:", this.latitude);
console.log("经度longtitude:", this.longtitude);
});
},
..........................
用法=》this.getLGTx()调用,检测设备是否开启导航,然后获取经纬度,逆解析。
这个理我用上了两个平台的接口,是因为我拿不到高德精确的经纬度。腾讯可以,但是逆解析出问题了。高德的逆解析又可以用。所以我就组合起来用了。或许有更好的办法,随意指正