小程序webview获取当前定位,第一想法就是微信jssdk,但是项目没有接入过微信授权,后台也没有相应接口,本着前端能解决就不麻烦后台的初心,开启的爬坑之路:
获取浏览器定位
getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
res=>{
const lat = res.coords.latitude;
const lng = res.coords.longitude;
// 经纬度转换地址
$.ajax({
url: "https://apis.map.qq.com/ws/geocoder/v1",
data: {
key: "BQFBZ-GNGCF-JIFJ5-J3MXI-RLLSJ-YBFEN",
location: lat + "," + lng,
output: "jsonp"
},
type: "get",
async: false,
dataType: "jsonp",
jsonp: "callback",
success: res => {
console.log("转换经纬度:", res);
},
error: err => {
console.log("fail转换经纬度失败:", err);
}
});
},
err => {
switch (err.code) {
case 0:
console.log("不包括其他错误编号中的错误");
break;
case 1:
console.log(
"用户拒绝浏览器获取位置信息"
);
break;
case 2:
console.log(
"尝试获取用户信息,但失败了"
);
break;
case 3:
console.log("设置了timeout值,获取位置超时了");
break;
}
},
{
// 指示浏览器获取高精度的位置,默认为false
enableHighAccuracy: false,
// 指定获取地理位置的超时时间,默认不限时,单位为毫秒
timeout: 15000,
// 最长有效期,在重复获取地理位置时,此参数指定多久再次获取位置。
maximumAge: 3000
}
);
} else {
alert("浏览器不支持定位");
}
}
注:1、网站 http 需改为 https;
2、谷歌浏览器无法获取;
3、询问是否弹框只弹一次,如果手误“不允许”后,弹框不会再被调起无法重新选择,手动设置-隐私-定位服务开启,重新进入页面还是拒绝的状态,手动清除缓存也还是不行,测试浏览器:微信、safari、谷歌、360、ie ...
有其中两次测试时突然弹一次询问框,具体什么情况什么机制下才会重新弹起也不知道,就非常突然像给你来个惊喜一样,看到网上有人说去恢复出厂设置就可以重新弹起询问框......果断放弃
使用腾讯地图获取定位
// .html引入
<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
// 页面方法
getLocation() {
let fun = new qq.maps.Geolocation("BQFBZ-GNGCF-JIFJ5-J3MXI-RLLSJ-YBFEN", "myapp")
if(fun) {
fun.getLocation(res=>{
console.log("获取经纬度成功:", res);
},err=>{
console.log("fail获取经纬度失败:", err);
},{
timeout: 5000,
maximumAge: 3000,
enableHighAccuracy: true
})
}else {
console.log('定位未加载')
}
}
注: 1、网站 http 需改为 https;
2、pc端和微信开发者工具都可以获取,但是真机测试却怎么都失败,无法获取成功;(人都懵了)
腾讯地图根据ip获取定位
$.ajax({
url: "https://apis.map.qq.com/ws/location/v1/ip",
data: {
key: "BQFBZ-GNGCF-JIFJ5-J3MXI-RLLSJ-YBFEN",
output: "jsonp"
},
type: "get",
async: false,
dataType: "jsonp",
jsonp: "callback",
success: res => {
console.log("获取经纬度成功:", res);
},
error: err => {
console.log("fail获取经纬度失败:", err);
}
});
微信、safari、谷歌....都可以获取成功啦,完美解决~高高兴兴去提测;
开心时间不到半小时,却被测试提bug了......以 “需要询问用户是否同意后才可获取定位”,“用户没有开启授权不可以让她获取到定位”.....类似的问题拒绝根据ip定位
最后最后-放弃了,乖乖去接入jssdk,让后台出接口吧哈哈哈....