사용자의 위치 감지(HTML)
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
이 자습서에서는 Windows 런타임 Geolocation API를 사용해 사용자의 지리적 위치를 검색하는 데 필요한 단계에 대해 설명합니다.
목표: 사용자의 지리적 위치를 검색하는 가장 간단한 방법을 배우게 됩니다. 이 자습서에서는 위치 데이터를 한 번 요청하는 간단한 앱을 만듭니다. 이 예에서와 같이, 일회성 작업(예: 메일 메시지에 지오태그 지정)에 위치를 사용하는 앱에는 getGeoPositionAsync를 한 번만 호출하는 것으로 충분할 수 있습니다. 앱에 위치가 반드시 필요하거나 위치 업데이트가 필요한 경우 위치 업데이트에 응답하는 방법에서 설명한 대로 앱에서 위치 이벤트를 처리해야 합니다.
사전 요구 사항
HTML과 JavaScript에 익숙해야 합니다.
지침
1. 위치를 사용하도록 설정했는지 확인
앱이 위치에 액세스하려면 먼저 장치에서 위치를 사용하도록 설정해야 합니다. 설정 앱에서 다음 위치 개인정보 설정이 켜져 있는지 확인합니다.
- **이 장치의 위치...**가 켜짐 상태임(Windows 10 Mobile에는 해당되지 않음)
- 위치 서비스 설정 위치가 켜짐 상태임
- 사용자의 위치를 사용할 수 있는 앱 선택에서 앱이 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("#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();
})();
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. 앱 테스트
- 디버그 메뉴에서 디버깅 시작을 클릭하여 솔루션을 테스트합니다.
- 샘플을 처음 실행하면 앱에서 위치를 사용할 수 있는지를 묻는 메시지가 표시됩니다. 허용 옵션을 선택합니다.
- 위치 가져오기 단추를 클릭하여 현재 위치를 가져옵니다.
요약
이 빠른 시작에서는 사용자의 현재 위치를 검색하는 간단한 앱을 만들었습니다.
위치에 대한 요청은 다음 코드에서 시작됩니다. 여기서는 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);
}