解决Android端微信浏览器每次调用百度地图API都会弹出允许位置信息弹窗问题

不知道大家有没有遇见过，开发微信公众号的时候，需要使用到当前的位置信息跟某一个地址的位置信息计算出这两点之间的距离，这个时候呢，无疑百度的API是比较好用的，比如说哈，有一个应用场景是这样的，数据库里面只存了地址信息，没有存对应的经纬度信息，这个时候呢，百度地图的API有给我们提供了一个叫做正逆地理编码的API，可以很方便的让我们根据地址信息解析出它的经纬度信息，然后拿到当前的定位信息，这样就可以计算出这两个地方他们之间的距离了，然后呢，本来以为这样的解决方式是很完美的，然后在系统浏览器上运行也没有任何的问题，但是呢，偏偏在Android端的微信浏览器（IOS的微信浏览器不会有这个问题）上就出现了问题，原因是什么呢？

经过调试我发现，微信浏览器每次点返回键都会刷新我们的页面，然后它也没有帮我们记住已经允许过获取位置信息这个权限了，所以它会再次向我们请求权限，这个就很烦了

接下来重点来了，解决办法其实很简单，微信浏览器不帮我们记住已经允许过权限了，那我们就自己写代码（前端可以用js的sessionStorage，后台可以用session）记住我们已经允许过权限了，于是自然就会想到使用session把我们的定位信息存起来，但是每次定位都去服务器交互的话感觉比较麻烦，所以我选择了sessionStorage来记住我们的定位信息，于是就有了下面的代码

<script type="text/javascript" charset="utf-8">

       // 四舍五入保留2位小数（若第二位小数为0，则保留一位小数）
       function keepTwoDecimal(num) {
           var result = parseFloat(num);
           if (isNaN(result)) {
               alert('传递参数错误，请检查！');
               return false;
           }
           result = Math.round(num * 100) / 100;
           return result;
       }

       // 计算房源到当前位置的距离，id是定位后显示位置距离的span的id
       function calcDistance(lng,lat,id) {

           // 调用百度地图API
           var map = new BMap.Map("allmap");
           // 初始化地图,设置城市和地图级别
           map.centerAndZoom("兴文",12);

           if (sessionStorage.getItem('currentLocPoint') == null){

               // 创建百度地图定位控件
               var geolocation = new BMap.Geolocation();
               geolocation.getCurrentPosition(function(r){
                   if(this.getStatus() == BMAP_STATUS_SUCCESS){
                       // 创建点坐标B--当前位置
                       var pointB = new BMap.Point(r.point.lng,r.point.lat);
                       // 存储起来的当前位置信息对象
                       var currentLocPoint = {
                           clng:r.point.lng,
                           clat:r.point.lat
                       };
                       // 将当前位置转为json信息存储在sessionStorage中，避免多次请求，同时解决多次询问获取位置信息的bug
                       sessionStorage.setItem('currentLocPoint',JSON.stringify(currentLocPoint));//这里不能直接写pointB因为sessionStorage里面只能存放字符串
                       // 创建点坐标A--房源位置
                       var pointA = new BMap.Point(lng,lat);
                       // 获取两点距离,保留小数点后两位
                       $(id).append(keepTwoDecimal((map.getDistance(pointA,pointB)).toFixed(2)/1000)+'km');
                   } else {
                       alert('定位失败');
                   }
               },{enableHighAccuracy: true});

           } else{

               // 从sessionStorage中取出当前位置点信息
               var p = sessionStorage.getItem('currentLocPoint');
               var pointB = new BMap.Point(JSON.parse(p).clng,JSON.parse(p).clat);
               // 创建点坐标A--房源位置
               var pointA = new BMap.Point(lng,lat);
               // 获取两点距离,保留小数点后两位
               $(id).append(keepTwoDecimal((map.getDistance(pointA,pointB)).toFixed(2)/1000)+'km');

           }
       }
</script>

测试一下，问题果然得到了完美的解决

附上效果图

解决Android端微信浏览器每次调用百度地图API都会弹出允许位置信息弹窗问题

猜你喜欢