利用 HTML5 提供的定位 API 可以幫助網頁獲取用戶設備的當前位置信息。但如果是在 Android 系統下的應用中打開網頁，我們使用 Hybrid 開發模式時用到的 WebView 包括應用本身都需要做一定的設置才能支持內嵌網頁的定位功能。
這里是一個簡單的網頁源碼，其中有一段 JavaScript 代碼，用于向宿主瀏覽器請求定位：
<!DOCTYPE html>
<head>
</head>
<body>
<button onclick="fetchLocation()">獲取位置</button>
<script>
var tipsEle = document.getElementById('tips')
function fetchLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(onGeoSuccess, onGeoError)
} else {
alert('當前設備不支持定位！')
}
}
function onGeoSuccess(event){
alert("Success: " + event.coords.latitude + ", " + event.coords.longitude)
}
function onGeoError(event){
alert("Error code " + event.code + ". " + event.message)
}
</script>
</body>
簡單說明：（有關 HTML5 定位 API 的詳細使用，可以參考鏈接：菜鳥教程 - HTML5 Geolocation）
navigator.geolocation 屬性判斷當前硬件瀏覽器環境是否支持定位；
getCurrentPosition() 函數，在支持定位的前提下，發起請求定位，并傳遞定位成功和失敗兩個函數作為回調參數。
然后在我們的 WebView 中添加如下設置：（這里假設上面的測試 html 文件放置在 assets 目錄下）
WebView contentWv = (WebView) findViewById(R.id.wv_content);
WebSettings settings = contentWv.getSettings();
settings.setJavaScriptEnabled(true);
contentWv.setWebChromeClient(new WebChromeClient(){
@Override
public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissions.Callback callback) {
callback.invoke(origin, true, true);
super.onGeolocationPermissionsShowPrompt(origin, callback);
}
});
contentWv.loadUrl("file:///android_asset/location.html");
代碼很簡單，最重要的一個地方就是，重寫 WebChromeClient 的這個方法：
onGeolocationPermissionsShowPrompt()
當網頁發起定位請求時，會調用到宿主 WebView 的這個方法，由開發者自行處理這個請求。可以看到，示例中包含這么一行代碼：
callback.invoke(origin, true, true);
這行代碼就是用來處理定位請求，一般會向用戶給出一個請求定位權限的彈窗。第二個 boolean 類型的參數表示是否授予網頁定位權限；而第三個 boolean 類型的參數則表示是否保留這個權限狀態。
值得注意的是，第三個參數的設置影響的是整個應用中的 WebView。如果我們在某個頁面的 WebView 中處理過一次網頁的定位請求，并設置第三個參數為 true，即保留狀態的情況下，當下次在其他頁面或者還是這個頁面打開網頁時將不再向用戶發起定位權限的請求，而是直接執行定位操作。
一般比較合適的做法是，在該回調函數中設置一個對話框，告知用戶是否授權定位操作。做得更好一點的話，還可以幫助用戶檢測設備的系統定位是否打開。沒有打開的情況下，提示用戶并跳轉至設置界面。
檢測系統定位是否打開的示例代碼：
private boolean isSystemLocationEnable() {
LocationManager manager = (LocationManager)getSystemService(Context.LOCATION_SERVICE);
boolean gpsLocationEnable = manager.isProviderEnabled(LocationManager.GPS_PROVIDER);
boolean networkLocationEnable = manager.isProviderEnabled(LocationManager.NETWORK_PROVIDER);
return gpsLocationEnable && networkLocationEnable;
}
跳轉至系統設置中的定位界面：
Intent intent = new Intent(Settings.ACTION_LOCATION_SOURCE_SETTINGS);
startActivity(intent);
還有最后一步，別忘了在 Manifest 清單文件中添加定位相關的權限，當然也包括網絡權限：（通過 GPS 精準定位和 WI-FI 的粗略定位）
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.INTERNET"/>
這段示例網頁代碼調用時的效果如圖：
整體看來，使用方式還挺簡單的，那是不是這種方式就一定萬無一失呢？
前面提過，使用 HTML5 定位 API 獲取用戶位置的前提是瀏覽器或者說我們 Android 系統中的原生 WebView 環境支持定位操作。事實上，經測試，這種方式不完全穩定。尤其是在國內各種廠商各種 ROM 的復雜環境下，還是有相當多品牌的手機是不支持這種定位操作的。甚至，你還會遇見，即使是使用同一臺手機，安裝不同的瀏覽器 App 對于定位的支持也不盡相同。
所以，HTML5 自身的定位操作只能作為一種輔助手段。更穩妥的做法是，開發人員通過百度、高德之類的第三方定位 SDK 在原生代碼中獲取用戶位置信息，當打開 WebView 中的網頁時通過拼接 URL 參數的形式傳遞給網頁。網頁自行判斷，如果 URL 中不包含定位信息的話，再通過自身的 API 發起定位請求。
或者通過HTML 網頁的 JS代碼 與 Java 原生代碼交互的方式間接操作。關于 JS 與 Java 交互的相關知識，可以參考我的這篇文章：
Android WebView —— Java 與 JavaScript 交互總結
關于我：亦楓，博客地址：http://yifeng.studio/，新浪微博：IT亦楓
微信掃描二維碼，歡迎關注我的個人公眾號：安卓筆記俠
不僅分享我的原創技術文章，還有程序員的職場遐想
