H5&Objc,webView加载时请求手机定位权限

作者: 奴良 | 来源:发表于2016-03-27 23:16 被阅读4052次

当我们使用H5与Native进行混合开发时候,如果需要web界面在加载时候获取手机定位权限,那么有两种方法:

  • 在加载web之前你把所需坐标拼接到网址内。
  • 把这个动作交给H5去处理。

第一种方法没有什么难点,这篇文章介绍下H5中如何利用geoLocation配合Objc进行定位权限的获取。效果图如下(alert中网址为项目内html文件路径):


加载本地html 加载需要定位的网站 location1

项目配置

iOS8.0之后,app内需要定位权限的话,则需要在info.plist中添加一行配置,如下:


info.plist

或者右键info.plist->open as source code,添加如下代码

<key>NSLocationWhenInUseUsageDescription</key>
<string>获取一下位置可好?</string>
  • 注意点
    这里需要注意一下,上方必须添加当应用启动期间获取定位权限的key,即NSLocationWhenInUseUsageDescription,如果info.plist中只添加了NSLocationAlwaysUsageDescription这个始终定位的key,则H5的geoLocation无法向手机请求定位权限。

JS代码如下

<script>
            var getLocation = function() {
                if (navigator.geolocation){
                    navigator.geolocation.getCurrentPosition(displayPosition, locationError);
                } else {
                    alert('浏览器不支持地理定位。');
                }
            }
            var displayPosition = function(pos) {
                alert('维度:'+ pos.coords.latitude+',经度:'+ pos.coords.longitude);
                document.getElementById("label").innerHTML = '维度:'+ pos.coords.latitude+',经度:'+ pos.coords.longitude;
                var properties = ['longitude', 'latitude', 'altitude', 'accuracy', 'altitudeAccuracy', 'heading', 'speed'];
                for (var i = 0, len = properties.length; i < len; i++) {
                    var value = pos.coords[properties[i]];
                    document.getElementById(properties[i]).innerHTML = value;
                }
                document.getElementById('timestamp').innerHTML = pos.timestamp; 
            }
            var locationError = function(error){
                switch(error.code) {
                    case error.TIMEOUT:
                    showError('A timeout occured! Please try again!');
                    break;
                    case error.POSITION_UNAVAILABLE:
                    showError('We can\'t detect your location. Sorry!');
                    break;
                    case error.PERMISSION_DENIED:
                    showError('Please allow geolocation access for this to work.');
                    break;
                    case error.UNKNOWN_ERROR:
                    showError('An unknown error occured!');
                    break;
                }
            }
            var showError = function(error){
                alert(error);
            }
        
        </script>

而你需要做的就是在body中添加onload直接调用getLocation()方法

<body onload="getLocation()">

上述工作做完之后,便可以在你的项目中进行测试了,搞一个webView去加载你自己的html便可以请求手机定位权限了。

相关文章

网友评论

  • 翎風:我还是不成功,H5页面去获取的时候,他还是弹出你上面第一张图的alert
    奴良:因为加载的本地的,就是会显示这个,如果像饿了么那种已经发布的网址,就不会显示路径
  • 浅浅浅丶蓝:我试了 没有弹出是否允许获取地理位置信息的弹窗. 求指导
    浅浅浅丶蓝:@奴良 我邮箱273892181@qq.com
    浅浅浅丶蓝:@奴良 都添加了, 就是没那个弹窗,浏览器第一次打开有, ios webview 打开不调用,能否给一个demo看一下,网页的和xcode 程序
    奴良:不会吧,是不是啥地方写错了?js写对了吗? 或者info.plist里面key都添加了吗
  • 回忆宇:楼主,一开始的alert出现的网址能去掉吗??我没发现在哪里有这个方法,难道是系统自带?
    回忆宇:@奴良 好的,谢谢。但是我想去掉这一串链接怎么办?
    奴良:@回忆宇 你可以用safari上带定位的外卖网站看看
    奴良:@回忆宇 这个网址因为是本地html,所以会这样显示,如果是加载的网页,则会显示网址
  • 回忆宇:能给一个demo吗

本文标题:H5&Objc,webView加载时请求手机定位权限

本文链接:https://www.haomeiwen.com/subject/durjlttx.html