빠른 시작: 사용자 위치 검색(HTML)

Applies to Windows and Windows Phone

이 자습서에서는 Windows 런타임 Geolocation API를 사용해 사용자의 지리적 위치를 검색하는 데 필요한 단계에 대해 설명합니다.

목표: 사용자의 지리적 위치를 검색하는 가장 간단한 방법을 배우게 됩니다. 이 자습서에서는 위치 데이터를 한 번 요청하는 간단한 앱을 만듭니다. 이 예에서와 같이, 일회성 작업(예: 메일 메시지에 지오태그 지정)에 위치를 사용하는 앱에는 getGeoPositionAsync를 한 번만 호출하는 것으로 충분할 수 있습니다. 앱에 위치가 반드시 필요하거나 위치 업데이트가 필요한 경우 위치 업데이트에 응답하는 방법에서 설명한 대로 앱에서 위치 이벤트를 처리해야 합니다.

사전 요구 사항

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 파일을 열고 다음 HTML을 파일의 BODY 태그 내부에 복사합니다.


<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. 위치 가져오기 단추를 클릭하여 현재 위치를 가져옵니다.

참고  위치 데이터가 표시되지 않으면 다음을 확인합니다.

  • 솔루션 탐색기에서 package.appxmanifest를 열고 접근 권한 값 탭에서 위치를 확인하여 위치에 대한 액세스를 사용하도록 설정했는지 확인합니다.
  • Windows에서는 관리자가 위치 서비스를 사용하지 않도록 설정한 경우 앱에서 사용자의 위치에 액세스할 수 없습니다. 제어판에서 위치 설정 변경을 열고 Windows Location 플랫폼 켜기가 선택되어 있는지 확인합니다.
  • 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 지도 SDK 샘플
Windows.Devices.Geolocation

 

 

표시:
© 2014 Microsoft