回應定位更新 (HTML) - Windows app development

發行項
12/11/2015

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

這個主題說明如何回應使用者定位的變更。

您必須知道的事

技術

Windows Runtime

先決條件

您應該熟悉 HTML 和 JavaScript。

指示

步驟 1: 驗證是否啟用定位功能

必須先在裝置上啟用 [位置]，您的應用程式才能存取位置。在 [設定]**** 應用程式中，確認已開啟下列位置隱私權設定：

已將 [此裝置的位置...] 設為 [開啟]**** (不適用於 Windows 10 行動裝置版)
已將定位服務設定的 [位置] 設為 [開啟]****
在 [選擇可以使用您的位置的應用程式] 底下，將您的應用程式設為 [開啟]****

步驟 2: 開啟 Microsoft Visual Studio

建立新專案，從 [JavaScript/市集應用程式] 專案類型中選擇 [空白應用程式]****。

步驟 3: 建立新專案

在 [新增專案] 對話方塊中，從 JavaScript 專案類型中選擇 [空白的應用程式]。

步驟 4: 啟用定位功能

在 [方案總管]**** 中，按兩下 Windows 和 Windows Phone 專案兩者的 package.appxmanifest，然後選取 [功能] 索引標籤。接著，核取 [功能]**** 清單中的 [位置]。這會將 Location 裝置功能新增至套件資訊清單檔案中。

  <Capabilities>
    <!-- DeviceCapability elements must follow Capability elements (if present) -->
    <DeviceCapability Name="location"/>
  </Capabilities>

步驟 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("#startTracking").addEventListener("click",
                        trackloc);

                    // Add an event handler to the button.
                    document.querySelector("#stopTracking").addEventListener("click",
                        stoptracking);

                }));
        }
    };

    var loc = null;

    function trackloc() {
        if (loc == null) {
            loc = new Windows.Devices.Geolocation.Geolocator();
        }
        if (loc != null) {
            loc.addEventListener("positionchanged", onPositionChanged);
            loc.addEventListener("statuschanged", onStatusChanged);
            // display initial status, in case location is turned off.
            document.getElementById('geolocatorStatus').innerHTML =
                getStatusString(loc.locationStatus);
        }
    }

    function stoptracking() {
        if (loc != null) {
            loc.removeEventListener("positionchanged", onPositionChanged);
        }
    }

    function onPositionChanged(args) {
        var pos = args.position;
        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);
    }

    // Handle change in status to display an appropriate message.        
    function onStatusChanged(args) {
        var newStatus = args.status;
        document.getElementById('geolocatorStatus').innerHTML =
            getStatusString(newStatus);
    }

    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.";
            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:
                return "Unknown status.";
        }
    }

    app.start();
})();

步驟 6: 新增應用程式的 HTML

開啟 Windows 和 Windows Phone 專案的 default.html 檔案，並將下列 HTML 複製到檔案的 BODY 標記中。

    <p>Geolocation Event Sample</p><br />
    <span id="status"></span><br />
    <button id="startTracking">Track Location</button><br />
    <br />
    <button id="stopTracking">Stop Tracking</button><br />
    Latitude: <span id="latitude">Waiting for update...</span><br />
    Longitude:  <span id="longitude">Waiting for update...</span><br />
    Accuracy (in meters): <span id="accuracy">Waiting for update...</span><br />
    Location Status: <span id="geolocatorStatus"></span><br />

步驟 7: 建置應用程式

選擇 [建置]**** > [建置方案] 來建置專案。

步驟 8: 測試應用程式

在 [偵錯]**** 功能表中按一下 [開始偵錯] 來測試方案。
第一次執行範例時，您會看到一個提示，詢問應用程式是否可以使用您的位置。請選擇 [允許]**** 選項。
按一下 [取得定位] 按鈕以取得目前定位。

備註

定位服務使用一些不同的來源來判斷位置。如果無法使用 GPS、基地台及 Wi-Fi，它將會改用「IP 位址」。在該情況下，請注意，您可能無法取得任何位置更新事件，因為「IP 位址」資料並不會經常更新。

如果您的應用程式只需取得位置資料一次，則不需訂閱更新，可改用快速入門：偵測使用者的位置中所述的 GetGeopositionAsync 方法。

共用方式為