h5各种定位方式(浏览器，公众号，小程序，App)

骑猪看日落 2023-01-20 12:53 16阅读 0赞

# h5各种定位方式(浏览器，公众号，小程序，App) #

### html5 geolocation 获取地理定位遇到 POSITION\_UNAVAILABLE ###

不管是原生iOS APP嵌入单个h5页面，还是都是h5页面的webapp也好，只要涉及到定位都会遇到这个情况。

当请求iOS开始定位的时候，会弹出一个提示框，提示你是否"允许"定位，允许定位继续下一步，如果一不小心点了下"不允许"之后，会发现，下次进到这个h5之后再也不会提示请求定位权限的提示框了。"不允许"被缓存了下来。再次调用 geolocation 会报 ***error.PERMISSION\_DENIED*** 错误

POSITION_UNAVAILABLE

解决方案就是，需要在系统中就行清理缓存的设置：

***（设置）Settings -> （通用）Genera -> （重置） Reset-> （重置定位于隐私）Reset Location & Privacy.  
（设置）Settings ->( 隐私）Privacy 开启 Location Services.***

重新进入页面即可提示用户权限提示了！

在 Safari 或者 在使用 UIWebview 的APP中当点击 ***“不允许” ***选项之后 webapp/html5  的定位服务不能再次 ***显示用户权限 ***提示框。

### 方法大概是这样的： ###

if(navigator.geolocation){  
      navigator.geolocation.getCurrentPosition(onSuccess , onError);  
    }else{  
      alert("您的浏览器不支持使用HTML 5来获取地理位置服务");  
    }  
    //定位数据获取成功响应  
    function  onSuccess(position){  
          alert('纬度: '          + position.coords.latitude          + '\n' +  
          '经度: '         + position.coords.longitude         + '\n' +  
          '海拔: '          + position.coords.altitude          + '\n' +  
          '水平精度: '          + position.coords.accuracy          + '\n' +  
          '垂直精度: ' + position.coords.altitudeAccura)  
    }  
    //定位数据获取失败响应  
    function onError(error) {  
      switch(error.code)  
      {  
        case error.PERMISSION_DENIED:  
        alert("您拒绝对获取地理位置的请求");  
        break;  
        case error.POSITION_UNAVAILABLE:  
        alert("位置信息是不可用的");  
        break;  
        case error.TIMEOUT:  
        alert("请求您的地理位置超时");  
        break;  
        case error.UNKNOWN_ERROR:  
        alert("未知错误");  
        break;  
      }  
    }

获取到的是经纬度，所以要调百度或者谷歌的地图api，来转换为城市。

我这里尝试返回错误信息的原因我猜可能是html5 默认调用的谷歌的接口，会有安全限制，所以我这里使用了 ***腾讯的api ***实现。

### 腾讯api实现  ###

1：引入[ **js-sdk**][_js-sdk]** **

2：**[注册][Link 1]** 账号获取 apikey密钥

https://lbs.qq.com/ //官网地址

getLocation() {
          let geolocation = new qq.maps.Geolocation(
            "XJVBZ-ORSR6-V3WSQ-E6AMR-JFNFT-XXXX",// key密钥
            "myapp"
          );
          let geoloc = geolocation.getLocation(function (position) {
            console.log("腾讯地图api:", position);
          });
    },

### 微信公众号（h5不可用） ###

腾讯 api 引入 jsSdk，获取地图定位***不可用***，需要使用 ***微信公众号api *wx.getLocation**获取

// 微信分享
    function wechatConfig({ state, commit }, {config, shareInfo}) {
      // 接口获取签名参数，进行微信环境签名初始化config
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: config.appId, // 必填，公众号的唯一标识
        timestamp: config.timestamp, // 必填，生成签名的时间戳
        nonceStr: config.nonceStr, // 必填，生成签名的随机串
        signature: config.signature, // 必填，签名，见附录1
        jsApiList:["openLocation","getLocation",'chooseImage','previewImage','updateAppMessageShareData','updateTimelineShareData','uploadImage','getLocalImgData',"openAddress"], // 必填，需要使用的JS接口列表
        openTagList: ["wx-open-launch-app"], // 获取开放标签权限
      });
      wx.error(function (err) {
        console.log("错误：", err);
      });
      wx.ready(function () {
        console.log("微信签名成功");
        let appLogo ="https://XXX-dev.ds.cn/myfiles/gmmc-upload/datac/b/cb681faa17e7c78c5b2498edf237af60/cb681faa17e7c78c5b2498edf237af60.png"; // app图标
        appLogo = "";
        shareInfo = Common.formatShare(shareInfo)
        wx.onMenuShareTimeline({
          title: shareInfo.WEIXIN_CIRCLE.title, // 分享标题
          link: shareInfo.WEIXIN_CIRCLE.url, // 分享链接
          imgUrl: shareInfo.WEIXIN_CIRCLE.thumb, // 分享图标
          success: function () {
            // 分享成功-处理...
          }
        })
        wx.onMenuShareAppMessage({
          title: shareInfo.WEIXIN.title, // 分享标题
          link: shareInfo.WEIXIN.url, // 分享链接
          imgUrl: shareInfo.WEIXIN.thumb, // 分享图标
          desc: shareInfo.WEIXIN.desc, // 分享描述
          success: function () {
            // 分享成功-处理...
          }
        });
        wx.openLocation({
          latitude: latitude, // 纬度，浮点数，范围为90 ~ -90
          longitude: longitude, // 经度，浮点数，范围为180 ~ -180。
          name: name, // 位置名
          address: addr, // 地址详情说明
          scale: 14, // 地图缩放级别,整形值,范围从1~28。默认为最大
          infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
        });
         wx.getLocation({
              type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
              success: function (res) {
                var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                coordinateInfo(latitude, longitude, resolve, reject)
                console.log("获取定位",res)
              },
              cancel: function () {
                getIpLocation(resolve, reject)
                return false;
              },
              fail: function (res) {
                console.info('ready getLocation fail=' + JSON.stringify(res))
                getIpLocation(resolve, reject)
            }
        });
      });
    }

### 小程序定位 ###

// 原生
    wx.getLocation({
     type: 'wgs84',
     success (res) {
       const latitude = res.latitude
       const longitude = res.longitude
       const speed = res.speed
       const accuracy = res.accuracy
     }
    })
    
    // uni
    uni.getLocation({
        type: 'wgs84',
        success: function (res) {
            console.log('当前位置的经度：' + res.longitude);
            console.log('当前位置的纬度：' + res.latitude);
        }
    });

### App定位（Uni , RN） ###

Uni:

// uni
    uni.getLocation({
        type: 'wgs84',
        success: function (res) {
            console.log('当前位置的经度：' + res.longitude);
            console.log('当前位置的纬度：' + res.latitude);
        }
    });

RN:

npm install react-native-location

自动link

react-native link react-native-location

源码：

import RNLocation from 'react-native-location';
    
    RNLocation.configure({
    distanceFilter: 5.0
    
    })
    
    RNLocation.requestPermission({
    ios: "whenInUse",
    
    android: {
    detail: "coarse"
    
    }
    
    }).then(granted => {
    if (granted) {
    this.locationSubscription = RNLocation.subscribeToLocationUpdates(locations => {
    /* Example location returned
    
    {
    speed: -1,
    
    longitude: -0.1337,
    
    latitude: 51.50998,
    
    accuracy: 5,
    
    heading: -1,
    
    altitude: 0,
    
    altitudeAccuracy: -1
    
    floor: 0
    
    timestamp: 1446007304457.029
    
    }
    
    */
    
    })
    
    }
    
    })

###      ###

[_js-sdk]: https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js
[Link 1]: https://lbs.qq.com/dev/console/application/mine