위치 업데이트 간 거리를 조정하는 방법(JavaScript 및 HTML을 사용하는 Windows 스토어 앱)

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

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

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

알아야 할 사항

기술

  • Windows Runtime

사전 요구 사항

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

지침

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

제어판을 열고, 개인 정보를 선택하고, 앱에서 내 위치를 사용하도록 허용켜기로 설정합니다.

단계 2: Microsoft Visual Studio 열기

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

단계 3: 새 프로젝트 만들기

새 프로젝트 대화 상자에서 JavaScript 프로젝트 유형으로 새 응용 프로그램을 선택합니다.

단계 4: 위치 기능 선언

솔루션 탐색기에서 package.appxmanifest를 두 번 클릭합니다. 기능 탭을 선택합니다. 기능 목록에서 위치를 선택합니다.

단계 5: 응용 프로그램 JavaScript 및 HTML 삽입

Default.html 파일을 열고 다음 HTML을 이 파일로 복사합니다(원래 내용과 교체).



<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Movement Threshold Sample</title>
    <script src="/js/default.js"></script>
    <!-- WinJS references -->
    <link rel="stylesheet" href="/winjs/css/ui-light.css" />
    <script type="text/javascript">

</script>
</head>
<body>
<span>Geolocation Event Sample</span><br />
<span id="MovementThresholdLabel">Movement Threshold in meters:</span><br />
<input id ="threshold" type="text"/><br />
<input type="button" onclick="trackloc()" value="Track Location" /><br />
<input type="button" onclick="stoptracking()" value="Stop Tracking" /><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> 
</body>
</html>


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

/js/Default.js 파일에 다음 코드를 삽입하여 원래 내용을 덮어씁니다.


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.latitude, pos.coordinate.longitude);
}

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

Default.js 파일에서, 이전 단계에 삽입한 코드 뒤에 다음 코드를 붙여 넣습니다.


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

    // First cell - latitude.
    cell1 = document.createElement("TD");
    cell1.innerHTML = lat;
    cell1.id = "latitude" + eventCount;
    row.appendChild(cell1);
    // Second cell - longitude.
    cell2 = document.createElement("TD");
    cell2.innerHTML = long;
    cell2.id = "longitude" + eventCount;
    row.appendChild(cell2);
    // Third cell - distance
    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: 거리를 계산하기 위한 코드 삽입

Default.js 파일에서, 이전 단계에 삽입한 코드 뒤에 다음 코드를 삽입합니다. 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: 상태 메시지를 표시하기 위한 코드 삽입

Default.js 파일에서, 이전 단계에 삽입한 코드 뒤에 상태 메시지를 표시하기 위한 다음 코드를 삽입합니다.


// 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: 앱 빌드

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

단계 11: 앱 테스트

  1. 디버그 > 디버깅 시작을 클릭하여 솔루션을 테스트합니다.
  2. 위치 가져오기 단추를 클릭하여 현재 위치를 가져옵니다.

설명

참고  Windows 위치 제공자는 Wi-Fi 정보를 사용해 위치를 결정합니다. Wi-Fi를 사용할 수 없으면 IP 주소를 대신 사용합니다. IP 주소 데이터는 자주 업데이트되지 않으므로, 컴퓨터에서 Wi-Fi를 사용할 수 없으면 위치 업데이트 이벤트를 받지 못할 수 있습니다.

전체 예제

관련 항목

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

 

 

표시:
© 2014 Microsoft. All rights reserved.