Android WebView 中的 Html 网页定位操作

2017-09-02

利用 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 的这个方法，由开发者自行处理这个请求。可以看到，示例中包含这么一行代码：

1	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;
}

跳转至系统设置中的定位界面：

1 2	Intent intent = new Intent(Settings.ACTION_LOCATION_SOURCE_SETTINGS); startActivity(intent);

还有最后一步，别忘了在 Manifest 清单文件中添加定位相关的权限，当然也包括网络权限：（通过 GPS 精准定位和 WI-FI 的粗略定位）

1
2
3

<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 交互总结

（END）

本文由亦枫创作并首发于 亦枫的个人博客 ，同步推送微信公众号：安卓笔记侠（androidnotebyyifeng）。

欢迎各种形式地交流与转载，注明作者、出处和微信公众号即可。

本文标题为: Android WebView 中的 Html 网页定位操作

本文链接为：https://woyifeng.com/2017/09/02/android-webview-html-geolocation/