HTML5 Geolocation API를 사용하면 즐겨찾는 웹사이트와 위치를 공유할 수 있습니다. Javascript는 위도와 경도를 캡처하고 백엔드 웹 서버로 보낼 수 있으며 지역 비즈니스를 찾거나 지도에 위치를 표시하는 것과 같은 멋진 위치 인식 작업을 수행할 수 있습니다. 지리적 위치 좌표는 장치의 지리적 위치를 지정합니다.
Geolocation 메소드 getCurrentPosition() 및 getPositionUsingMethodName()은 위치 정보를 검색하는 콜백 메소드를 지정합니다. 이러한 메서드는 전체 위치 정보를 저장하는 개체 Position과 비동기적으로 호출됩니다.
getCurrentPostion() 메서드를 사용할 것입니다. Google 지도에서 HTML5 Geolocation을 사용하여 현재 위치를 얻으려면 Google Static Maps API용 API 키를 설정해야 합니다.
https://console.developers.google.com으로 이동하여 Google 지도용 무료 API 키를 받으세요. 이 키를 코드에 추가하여 Geolocation을 사용하십시오.
다음 코드를 실행하여 Google 지도에서 HTML5 Geolocation을 사용하여 현재 위치를 표시할 수 있습니다.
예시
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function showLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var latlongvalue = position.coords.latitude + ","
+ position.coords.longitude;
var img_url = "https://maps.googleapis.com/maps/api/staticmap?center="
+latlongvalue+"&zoom=14&size=400x300&key
=AIzaSyAa8HeLH2lQMbPeOiMlM9D1VxZ7pbGQq8o";
document.getElementById("mapholder").innerHTML =
"<img src='"+img_url+"'>";
}
function errorHandler(err) {
if(err.code == 1) {
alert("Error: Access is denied!");
} else if( err.code == 2) {
alert("Error: Position is unavailable!");
}
}
function getLocation(){
if(navigator.geolocation){
// timeout at 60000 milliseconds (60 seconds)
var options = {timeout:60000};
navigator.geolocation.getCurrentPosition
(showLocation, errorHandler, options);
} else{
alert("Sorry, browser does not support geolocation!");
}
}
</script>
</head>
<body>
<div id="mapholder"></div>
<form>
<input type="button" onclick="getLocation();" value="Get Location"/>
</form>
</body>
</html>