Android webview html5地理定位详解-学到老web开发

Android webview html5地理定位详解

发表于:2015-07-31 10:35:53 | 2314次阅读| 作者:html5,css3

摘要：Android WebView从assets中加载html5页面，实现地理位置定位，有需要的朋友可以参考下。

今天调研一个html5页面的定位问题，发现在手机浏览器上html5是可以实现定位的，但是在webview中就无法定位了。而我居然以为html5的地理定位在webview中不可行。

第一步准备html5页面
html5页面代码如下：

		html5代码
	

运行代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<p id="demo">点击这个按钮，获得您的坐标：</p>
<button onclick="getLocation()">试一下</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude; 
}
</script>
</body>
</html>

01<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
02<html>
03<head>
04<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
05</head>
06<body>
07<p id="demo">点击这个按钮，获得您的坐标：</p>
08<button onclick="getLocation()">试一下</button>
09<script>
10var x=document.getElementById("demo");
11function getLocation()
12{
13if (navigator.geolocation)
14{
15navigator.geolocation.watchPosition(showPosition);
16}
17else{x.innerHTML="Geolocation is not supported by this browser.";}
18}
19function showPosition(position)
20{
21x.innerHTML="Latitude: " + position.coords.latitude +
22"<br />Longitude: " + position.coords.longitude; 
23}
24</script>
25</body>
26</html>

第二步设置android代码
后来又在网上查了查，发现，需要设置一些东西。设置websetting的属性：

		代码
	

01webView.setWebViewClient(new WebViewClient());
02//webView.loadUrl("http://news.baidu.com/");
03webView.loadUrl("file:///android_asset/index.html");
04 
05WebSettings webSettings = webView.getSettings();
06webSettings.setJavaScriptEnabled(true);
07 
08/**
09* 以下部分可以不要
10*/
11// //启用数据库 
12// webSettings.setDatabaseEnabled(true); 
13// String dir = this.getApplicationContext().getDir("database", Context.MODE_PRIVATE).getPath();
14//
15// //启用地理定位 
16// webSettings.setGeolocationEnabled(true); 
17// //设置定位的数据库路径 
18// webSettings.setGeolocationDatabasePath(dir); 
19 
20 
21/**
22* 此处很重要，必须要
23*/
24//***最重要的方法，一定要设置，这就是出不来的主要原因
25webSettings.setDomStorageEnabled(true);
26webView.setWebChromeClient(new WebChromeClient(){
27 
28//配置权限（同样在WebChromeClient中实现）
29@Override
30public void onGeolocationPermissionsShowPrompt(String origin,
31Callback callback) {
32callback.invoke(origin, true, false); 
33super.onGeolocationPermissionsShowPrompt(origin, callback);
34}
35 
36 
37});

问题解决！

特别试了试：

同时打开网络和GPS可以定位，获得的是经纬度信息。

只打开网络可以定位，只打开GPS也可以定位。

关闭网络和GPS也可以定位。

由此可见，是由地理位置定位所得，只能获得经纬度信息。

若要获得详细的地址信息，需要调用地图API实现。如下所示：

纬度：116.40387397，经度：39.91488908 详细地址：北京市天安门