H5&Objc，webView加载时请求手机定位权限
2016-03-27 本文已影响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便可以请求手机定位权限了。
