Windows 앱
콘텐츠의 테이블 축소
콘텐츠의 테이블 확장

거리 기반 위치 업데이트에 응답(HTML)

[이 문서는 최종본이 아니며 변경될 수 있습니다.]

일부 앱에서는 사용자가 멀리 이동한 경우에만 위치 업데이트가 필요합니다. 이 항목에서는 사용자가 위치 업데이트 간 거리를 조정하도록 하는 앱을 만드는 방법에 대해 설명합니다. 이 거리는 이동 임계값이라고 하며 위치 업데이트 이벤트가 발생하는 데 필요한 위치의 최소 변경입니다. 이동 임계값을 구현하여, 뉴스나 날씨 등 지역 정보만 제공하는 앱을 만들 수 있습니다. 그러면 사용자 위치가 다른 도시로 변경되지 않는 한 위치 업데이트가 필요하지 않을 수 있습니다..

위치 업데이트 이벤트가 발생할 때마다 이 앱의 코드는 마지막 업데이트 이후 사용자가 이동한 거리와 새 좌표가 포함된 행을 추가하여 테이블을 업데이트합니다. 이동 거리는 haversine 공식을 사용해 계산됩니다.

입력 상자에 이동 임계값을 입력하면, 이벤트가 발생할 때마다 이동한 거리가 항상 이동 임계값보다 낮다는 것을 알 수 있습니다.

알아야 할 사항

기술

  • Windows Runtime

사전 요구 사항

  • HTML과 JavaScript에 익숙해야 합니다.

지침

단계 1: 위치를 사용하도록 설정했는지 확인

앱이 위치에 액세스하려면 먼저 장치에서 위치를 사용하도록 설정해야 합니다. 설정 앱에서 다음 위치 개인정보 설정이 켜져 있는지 확인합니다.

  • 위치on 상태임
  • 사용자가 선택한 Windows 및 앱에서 위치와 위치 기록을 사용할 수 있도록 허용 설정이 on 상태임
  • 사용자의 위치를 사용할 수 있는 앱 선택에서 앱이 on 상태임

참고  위치사용자의 위치를 사용할 수 있는 앱 선택 설정을 사용할 수 없는 경우도 있습니다.

단계 2: Microsoft Visual Studio 열기

Visual Studio의 인스턴스를 엽니다.

단계 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);

                }));
        }
    };


    app.start();
})();



단계 6: Geolocator를 만들고 위치 업데이트를 처리하기 위한 코드 삽입

단추를 누를 때 이벤트를 처리하고 위치가 변경되는 경우를 처리하기 위해 다음 코드를 삽입합니다.


var eventCount = 0; // The number of positionchanged events that have been raised.
var loc = null;

// Create the Geolocator, set movementThreshold if specified,
// and subscribe to events.
function trackloc() {
    if (loc == null) {
        loc = new Windows.Devices.Geolocation.Geolocator();
    }
    if (loc != null) {
        // Set movementThreshold
        var threshold = document.getElementById("threshold").value;
        if (threshold >= 0) {
            loc.movementThreshold = threshold;
        }
        loc.addEventListener("positionchanged", onPositionChanged);
        loc.addEventListener("statuschanged", onStatusChanged);
    }
    else {
        document.getElementById('status').innerHTML = "Geolocator not found.";
    }
}

function stoptracking() {
    if (loc != null) {
        loc.removeEventListener("positionchanged", onPositionChanged);
    }
}
function onPositionChanged(args) {
    eventCount = eventCount + 1;
    var pos = args.position;
    addLatLong(pos.coordinate.point.position.latitude, pos.coordinate.point.position.longitude);
}


단계 7: HTML 테이블을 업데이트하기 위한 코드 삽입

위치와 총 거리에 대한 HTML 테이블을 업데이트하기 위해 다음 코드를 추가합니다.


    // Add a table row containing the coordinates and distance moved.
// Add a table row containing the coordinates and distance moved.
function addLatLong(lat, long) {
        
    var tabBody = document.getElementById("inputtable");
    var row = document.createElement("TR");

    // First cell - latitude.
    var cell1 = document.createElement("TD");
    cell1.innerHTML = lat;
    cell1.id = "latitude" + eventCount;
    row.appendChild(cell1);
    // Second cell - longitude.
    var cell2 = document.createElement("TD");
    cell2.innerHTML = long;
    cell2.id = "longitude" + eventCount;
    row.appendChild(cell2);
    // Third cell - distance
    var cell3 = document.createElement("TD");
    cell3.id = "distance" + eventCount;
    if (eventCount < 2) {
        cell3.innerHTML = "0";
    }
    else {
        var prevLat = document.getElementById("latitude" + (eventCount - 1)).innerHTML;
        var prevLong = document.getElementById("longitude" + (eventCount - 1)).innerHTML;
        // multiply Distance by 1000 to get meters from km
        cell3.innerHTML = Distance(prevLat, prevLong, lat, long) * 1000;
    }
    row.appendChild(cell3);
    tabBody.appendChild(row);
}



단계 8: 거리를 계산하기 위한 코드 삽입

Haversine 공식을 사용하여 거리를 계산하기 위해 이 코드를 삽입합니다.


// Calculates distance between two latitude/longitude coordinates in km,
// based on the haversine formula.
function Distance(prevLat, prevLong, currLat, currLong) {
    // KNOWN CONSTANTS
    var degreesToRadians = Math.PI / 180;
    var earthRadius = 6371; // approximation in kilometers assuming earth to be spherical
    // CONVERT LATITUDE AND LONGITUDE VALUES TO RADIANS
    var previousRadianLat = prevLat * degreesToRadians;
    var previousRadianLong = prevLong * degreesToRadians;
    var currentRadianLat = currLat * degreesToRadians;
    var currentRadianLong = currLong * degreesToRadians;
    // CALCULATE RADIAN DELTA BETWEEN THE TWO POSITIONS
    var latitudeRadianDelta = currentRadianLat - previousRadianLat;
    var longitudeRadianDelta = currentRadianLong - previousRadianLong;
    var expr1 = (Math.sin(latitudeRadianDelta / 2) * Math.sin(latitudeRadianDelta / 2)) +
                (Math.cos(previousRadianLat) * Math.cos(currentRadianLat) * Math.sin(longitudeRadianDelta / 2) * Math.sin(longitudeRadianDelta / 2));
    var expr2 = 2 * Math.atan2(Math.sqrt(expr1), Math.sqrt(1 - expr1));
    var distanceValue = earthRadius * expr2;
    return distanceValue;
}



단계 9: 상태 메시지를 표시하기 위한 코드 삽입

상태 메시지를 표시하기 위해 다음 코드를 삽입합니다.


// 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";
    }
}


단계 10: 앱에 대한 HTML 추가

Windows 및 Windows Phone 프로젝트에 대한 default.html 파일을 열고 다음 HTML을 파일의 BODY 태그 내부에 복사합니다.


    <span>Geolocation Event Sample</span><br />
    <span id="MovementThresholdLabel">Movement Threshold in meters:</span><br />
    <input id="threshold" type="text" /><br />

    <button id="startTracking">Track Location</button><br />
    <br />
    <button id="stopTracking">Stop Tracking</button><br />

    <table style="border: solid; width:auto">
        <thead><tr><th>Latitude</th><th>Longitude</th><th>Distance (meters)</th></tr></thead>
        <tbody id="inputtable">
            <tr></tr>
        </tbody>
    </table>
    <div id="geolocatorStatus"></div>


단계 11: 앱 빌드

빌드 > 솔루션 빌드를 클릭하여 프로젝트를 빌드합니다.

단계 12: 앱 테스트

  1. 디버그 메뉴에서 디버깅 시작을 클릭하여 솔루션을 테스트합니다.
  2. 샘플을 처음 실행하면 앱에서 위치를 사용할 수 있는지를 묻는 메시지가 표시됩니다. 허용 옵션을 선택합니다.
  3. 위치 가져오기 단추를 클릭하여 현재 위치를 가져옵니다.

설명

참고  위치 서비스는 많은 다른 소스를 사용하여 위치를 결정합니다. GPS, 셀 타워 및 Wi-Fi를 사용할 수 없는 경우 대신 IP 주소를 사용합니다. 이 경우 IP 주소 데이터는 자주 업데이트되지 않으므로 위치 업데이트 이벤트를 받지 못할 수 있습니다.

관련 항목

Windows 10 Technical Preview 지리적 위치 샘플
Windows 8.1 지리적 위치 샘플
지리적 위치 샘플
Windows.Devices.Geolocation
위치 인식 응용 프로그램에 대한 지침

 

 

표시:
© 2016 Microsoft