當我們使用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便可以請求手機定位權限了。