AndroidのWebViewで位置情報を使用するには

AndroidのWebViewで位置情報を使用するポイントは次の3つです。

(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);
}

アプリケーションを実行します。
緯度と経度が表示されたら成功です。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください