クイック スタート: ユーザーの位置の検出 (HTML)

Applies to Windows and Windows Phone

このチュートリアルでは、Windows ランタイム地理位置情報 API を使ってユーザーの地理的な位置を検出するために必要な手順を説明します。

目標: ここで説明するのは、ユーザーの地理的な位置を検出する最も簡単な方法です。 このチュートリアルでは、位置データを 1 回だけ要求する簡単なアプリを作成します。メール メッセージに地理位置情報タグを付けるなど、1 回のタスクでしか位置情報を使わないアプリであれば、この例に示すように getGeoPositionAsync の呼び出しを 1 回行うだけで十分な可能性があります。位置情報が必須のアプリや位置情報の更新が必要なアプリでは、位置情報イベントを処理する必要があります。方法については、「位置情報の更新に対応する方法」をご覧ください。

必要条件

HTML と JavaScript について理解している必要があります。

手順

1. 位置情報が有効になっていることを確認する

デバイスでユーザーの位置情報にアクセスできることを確認します。 Windows でこの設定を確認するには、設定チャームを開き、[PC 設定の変更][プライバシー][位置情報] の順にクリックします。Windows Phone では、[設定][位置情報] の順に選び、[位置情報サービス] をオンに設定します。

2. Microsoft Visual Studio を開く

Visual Studio のインスタンスを開きます。

3. 新しいプロジェクトを作る

[JavaScript/ストア アプリ] のプロジェクトの種類を選び、[空のアプリケーション] を選んで、新しいプロジェクトを作ります。

4. 位置情報機能を宣言する

Windows プロジェクトと Windows Phone プロジェクトの両方について、ソリューション エクスプローラー[package.appxmanifest] をダブルクリックします。[機能] タブをクリックします。[機能] の一覧で、[位置情報] をオンにします。

5. JavaScript コードを置き換える

共有プロジェクトで、default.js (/js/default.js) を開きます。ファイル内のコードを次のコードに置き換えます。


(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {

            args.setPromise(WinJS.UI.processAll().
                done(function () {

                    // Add an event handler to the button.
                    document.querySelector("#getLocation").addEventListener("click",
                        getLoc);
                }));
        }
    };

    var loc = null;

    function getLoc() {
        if (loc == null) {
            loc = new Windows.Devices.Geolocation.Geolocator();
        }
        if (loc != null) {
            loc.getGeopositionAsync().then(getPositionHandler, errorHandler);
        }
    }

    function getPositionHandler(pos) {
        document.getElementById('latitude').innerHTML = pos.coordinate.point.position.latitude;
        document.getElementById('longitude').innerHTML = pos.coordinate.point.position.longitude;
        document.getElementById('accuracy').innerHTML = pos.coordinate.accuracy;
        document.getElementById('geolocatorStatus').innerHTML =
            getStatusString(loc.locationStatus);
    }

    function errorHandler(e) {        
        document.getElementById('errormsg').innerHTML = e.message;
        // Display an appropriate error message based on the location status.
        document.getElementById('geolocatorStatus').innerHTML =
            getStatusString(loc.locationStatus);    
    }

    function getStatusString(locStatus) {
        switch (locStatus) {
            case Windows.Devices.Geolocation.PositionStatus.ready:
                // Location data is available
                return "Location is available.";        
                break;
            case Windows.Devices.Geolocation.PositionStatus.initializing:
                // This status indicates that a GPS is still acquiring a fix
                return "A GPS device is still initializing."; 
                break;
            case Windows.Devices.Geolocation.PositionStatus.noData:
                // No location data is currently available 
                return "Data from location services is currently unavailable.";       
                break;
            case Windows.Devices.Geolocation.PositionStatus.disabled:
                // The app doesn't have permission to access location,
                // either because location has been turned off.
                return "Your location is currently turned off. " +
                    "Change your settings through the Settings charm " +
                    " to turn it back on.";
                break;
            case Windows.Devices.Geolocation.PositionStatus.notInitialized:
                // This status indicates that the app has not yet requested
                // location data by calling GetGeolocationAsync() or 
                // registering an event handler for the positionChanged event. 
                return "Location status is not initialized because " +
                    "the app has not requested location data.";
                break;
            case Windows.Devices.Geolocation.PositionStatus.notAvailable:
                // Location is not available on this version of Windows
                return "You do not have the required location services " +
                    "present on your system.";
                break;
            default:
                break;
        }
    }

    app.start();
})();

default.js の直接起動される匿名関数内に、次のコードを追加します。

6. アプリの HTML を追加する

Windows プロジェクトと Windows Phone プロジェクトの default.html ファイルを開き、ファイルの BODY タグ内に次の HTML をコピーします。


<div>
    <p>Click "Get Location" to get geolocation data.</p>
    <br />
    <button id="getLocation">getLocation</button> <br />
</div>
<br/>
<div>
    Latitude: <span id="latitude"></span><br />
    Longitude: <span id="longitude"></span><br />
    Accuracy (in meters): <span id="accuracy"></span><br />
    Location Status: <span id="geolocatorStatus"></span><br />
    Error Message: <span id="errormsg"></span><br />
</div>

7. アプリをビルドする

[ビルド][ソリューションのビルド] の順にクリックして、プロジェクトをビルドします。

8. アプリをビルドする

[ビルド][ソリューションのビルド] の順にクリックして、プロジェクトをビルドします。

9. アプリをテストする

  1. [デバッグ][デバッグ開始] の順にクリックし、ソリューションをテストします。
  2. Windows では、サンプルを初めて実行するときに、アプリで位置情報を使ってよいかどうかを確認するメッセージが表示されます。[許可] をクリックします。
  3. [Get Location] (位置情報の取得) をクリックして、現在の位置を取得します。

  位置情報データが表示されない場合は、次の確認を行います。
  • ソリューション エクスプローラーで package.appxmanifest を開き、[機能] タブの [位置情報] を調べて、位置情報へのアクセスが有効であることを確認します。
  • Windows では、管理者が位置情報サービスを使用できなくしている場合は、アプリでユーザーの位置情報にアクセスできません。デスクトップ コントロール パネルで [位置情報の設定変更] を開き、[Windows 位置情報プラットフォームを有効にする] がオンになっていることを確認します。
  • Windows Phone では、ユーザーは設定アプリで位置情報を使用できないようにすることができます。設定アプリを開き、[位置情報] を選び、[位置情報サービス] のスイッチがオンに切り替わっていることを確認します。

要約

このクイック スタートでは、ユーザーの現在の位置を検出する簡単なアプリを作成しました。

位置情報の要求を開始するコードを次に示します。このコードでは、Geolocator オブジェクトを作成し、getGeoPositionAsync を呼び出して、成功と失敗のそれぞれについてハンドラーを指定しています。


function getloc() {
    if (loc == null) {
        loc = new Windows.Devices.Geolocation.Geolocator();
    }
    if (loc != null) {
        loc.getGeopositionAsync().then(getPositionHandler, errorHandler);
    }
}

位置を検出できた場合は、getPositionHandler 関数で緯度、経度、精度を表示します。


function getPositionHandler(pos) {
    document.getElementById('latitude').innerHTML = pos.coordinate.point.position.latitude;
    document.getElementById('longitude').innerHTML = pos.coordinate.point.position.longitude;
    document.getElementById('accuracy').innerHTML = pos.coordinate.accuracy;
    document.getElementById('geolocatorStatus').innerHTML =
            getStatusString(loc.locationStatus);
}

位置の検出に失敗した場合は、errorHandler 関数で getStatusString ヘルパー関数を呼び出して、該当する状態メッセージを表示します。


function errorHandler(e) {        
    document.getElementById('errormsg').innerHTML = e.message;
    // Display an appropriate error message based on the location status.
    document.getElementById('geolocatorStatus').innerHTML =
        getStatusString(loc.locationStatus);    
}

関連トピック

地理位置情報サンプル
Bing Maps SDK サンプル
Windows.Devices.Geolocation

 

 

表示:
© 2015 Microsoft