坑 -- h5获取用户当前定位

小程序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，让后台出接口吧哈哈哈....