新人日誌3

Webページ上に表示させたGoogleマップに位置情報を渡してみましょう。

前回表示させたGoogleマップに位置情報を渡して、表示中心位置を変えてみます。

位置情報を取得するためにGeolocation APIを使用します。

現在利用しているブラウザがGeolocation APIに対応しているかどうかを調べるために

if (navigator.geolocation)

で調べます。真であれば対応しています。

対応していれば、まず

var optionObj = {

                “enableHighAccuracy”: false,  //高精度

                “timeout”: 8000,    //タイムアウトするまでの時間(ミリ秒)

                “maximumAge”: 5000, //位置情報を保持しておく時間(ミリ秒)

            };

で前準備情報を作成します。その後

navigator.geolocation.getCurrentPosition

というメソッドに

成功時に実行される処理、

失敗時に実行される処理

先程作った前準備情報の順番で引数に渡します。

今回Googleマップに位置情報(緯度経度)を反映したいので、成功時に実行される処理は

function successFunc(position) {

        var lat = position.coords.latitude;         //緯度

        var lng = position.coords.longitude;        //経度

        var glatlng = new google.maps.LatLng(lat, lng)  //googleマップ用に

        gmap.setCenter(glatlng);    //googleマップの中心位置を変更

    }

とします。

引数で渡されるpositionのcoordsに各種情報が入っているので、それぞれ変数に格納していきます。

その後、googleマップ用に加工し、変数gmapのsetCenterへ渡します

これでGoogleマップの表示中心位置が現在位置に変更されます。

失敗時に実行される処理は

function errorFunc(error) {

        switch(error.code)

        {

            case 0: console.log(“原因不明のエラー”)

            break;

            case 1: console.log(“位置情報の使用不許可”)

            break;

            case 2: console.log(“電波状況等で位置情報が取得できなかった。”)

            break;

            case 3: console.log(“タイムアウトエラー”)

            break;

        }

    }

とします。

引数で渡されるerrorのcodeにエラーの情報が格納されているので、それによって表示する文字列を変更しています。

水曜担当：Tanaka

このエントリーをはてなブックマークに追加


tanaka at 2019年02月13日 10:00:08


アプリ関連ニュース

お問い合わせはこちら

お問い合わせ・ご相談はお電話、またはお問い合わせフォームよりお受け付けいたしております。

tel. 06-6454-8833（平日 10:00～17:00）

お問い合わせフォーム


↑

↓