AndroidのWebViewで位置情報を使用するポイントは次の３つです。
(1) パーミッションを有効にする
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
(2) WebViewのJavaScriptと位置情報を有効にする
WebSettings settings = webView.getSettings();
settings.setGeolocationEnabled(true);
settings.setJavaScriptEnabled(true);
(3) WebChromeClientのonGeolocationPermissionsShowPromptメソッドをオーバーライドして位置情報の取得を許可する
webView.setWebChromeClient(new WebChromeClient() {
@Override
public void onGeolocationPermissionsShowPrompt(String origin, Callback callback) {
callback.invoke(origin, true, false);
}
});
現在の位置をWebViewに表示するサンプルアプリケーションを作成します。
AndroidManifest.xmlに次の行を追加します。
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
画面いっぱいにWebViewを配置します。
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="jp.gesource.webviewsample.MainActivity">
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/webView"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true" />
</android.support.design.widget.CoordinatorLayout>
WebViewの設定を行い、位置を表示します。
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView webView = (WebView) findViewById(R.id.webView);
//(2) WebViewのJavaScriptと位置情報を有効にする
WebSettings settings = webView.getSettings();
settings.setGeolocationEnabled(true);
settings.setJavaScriptEnabled(true);
//(3) WebChromeClientのonGeolocationPermissionsShowPromptメソッドをオーバーライドして
// 位置情報の取得を許可する
webView.setWebChromeClient(new WebChromeClient() {
@Override
public void onGeolocationPermissionsShowPrompt(String origin, Callback callback) {
callback.invoke(origin, true, false);
}
});
// 位置を表示する
String html =
"<!DOCTYPE html><html lang=\"ja\"><head><meta charset=utf-8><script>\n" +
"navigator.geolocation.getCurrentPosition(successCallback, errorCallback);\n" +
"function successCallback(position) {\n" +
" var s = \"緯度：\" + position.coords.latitude + \"<br>\";\n" +
" s += \"経度：\" + position.coords.longitude + \"<br>\";\n" +
" document.getElementById(\"show_result\").innerHTML = s;\n" +
"}\n" +
"function errorCallback(error) {\n" +
" var err_msg = \"\";\n" +
" switch(error.code) {\n" +
" case 1:\n" +
" err_msg = \"位置情報の利用が許可されていません\";\n" +
" break;\n" +
" case 2:\n" +
" err_msg = \"デバイスの位置が判定できません\";\n" +
" break;\n" +
" case 3:\n" +
" err_msg = \"タイムアウトしました\";\n" +
" break;\n" +
" }\n" +
" document.getElementById(\"show_result\").innerHTML = err_msg;\n" +
"}\n" +
"</script></head><body><p>あなたの現在位置</p><div id=\"show_result\"></div></body></html>";
webView.loadData(html, "text/html; charset=UTF-8", null);
}
アプリケーションを実行します。
緯度と経度が表示されたら成功です。