Android webview html5地理定位详解
|
阅读数:--次|
作者:html5,css3
摘要：Android WebView从assets中加载html5页面，实现地理位置定位，有需要的朋友可以参考下。
今天调研一个html5页面的定位问题，发现在手机浏览器上html5是可以实现定位的，但是在webview中就无法定位了。而我居然以为html5的地理定位在webview中不可行。
第一步准备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>
<!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>
第二步设置android代码
后来又在网上查了查，发现，需要设置一些东西。设置websetting的属性：
webView.setWebViewClient(new WebViewClient());
//webView.loadUrl("http://news.baidu.com/");
webView.loadUrl("file:///android_asset/index.html");
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
/**
* 以下部分可以不要
*/
// //启用数据库
// webSettings.setDatabaseEnabled(true);
// String dir = this.getApplicationContext().getDir("database", Context.MODE_PRIVATE).getPath();
//
// //启用地理定位
// webSettings.setGeolocationEnabled(true);
// //设置定位的数据库路径
// webSettings.setGeolocationDatabasePath(dir);
/**
* 此处很重要，必须要
*/
//***最重要的方法，一定要设置，这就是出不来的主要原因
webSettings.setDomStorageEnabled(true);
webView.setWebChromeClient(new WebChromeClient(){
//配置权限（同样在WebChromeClient中实现）
@Override
public void onGeolocationPermissionsShowPrompt(String origin,
Callback callback) {
callback.invoke(origin, true, false);
super.onGeolocationPermissionsShowPrompt(origin, callback);
}
});
问题解决！
特别试了试：
同时打开网络和GPS可以定位，获得的是经纬度信息。
只打开网络可以定位，只打开GPS也可以定位。
关闭网络和GPS也可以定位。
由此可见，是由地理位置定位所得，只能获得经纬度信息。
若要获得详细的地址信息，需要调用地图API实现。如下所示：
纬度：116.40387397，经度：39.91488908 详细地址：北京市天安门