HTML5의 특성으로 geolocation을 활용할 수 있습니다.

따라서 GPS를 갖춘 모바일 디바이스가 아닌 기기에서도 브라우져에서 좌표정보를 활용하는 것이 가능한데, 아마도 IP에 담긴 정보를 기반으로 하기 때문에 완벽하다고는 할 수 없습니다.

하지만 어쨋든 위치 정보를 활용할 수 있으니 좋은 것 같습니다.


좌표를 얻는 방법까지는 쉽게 알 수 있었는데, 좌표 정보를 이용해.

페이스북 같은 곳에서 활용하는 것처럼, OO주변과 같이 사용하거나,

어느 지역인지 주소를 출력하기 위해.

이리저리 해봐도 잘 안되더군요. 다른 사람들 페이지에 구글맵에서 바로 띄우는 방법이 있었는데, 저는 맵에 표시할 필요 없이.. 그냥 주소를 활용하고 싶을 뿐이여서.

결국 많은 분들의 블로그를 보고 제가 원하는 방식으로 값을 얻을 수 있었습니다.


<!DOCTYPE html>

<html>

<head>


</head>

<body>


<p id="demo4">버튼을 누르면 좌표가 업데이트 됩니다.:</p>

<button onclick="getLocation4()">좌표 구하기!!</button>

//버튼을 사용해 좌표를 구하는 예제를 사용하였습니다. 따라서 버튼이 클릭되면 getLocation4() 라는 java script 메소드가 호출됩니다.


<p id="text1"></p>

<p id="text2"></p>

//두 문단은 좌표 출력과 주소 출력을 위해 준비했습니다.


<script type="text/javascript"        src="http://maps.googleapis.com/maps/api/js?sensor=true">

</script>

//구글맵 사용을 위해 API를 붙여넣습니다.


<script>

var x4 = document.getElementById("demo4");

//demo4라고 이름 붙여진 문단에 내용 추가나 변경 등을 수행하기 위해 변수에 담습니다.

//여기서부터 getLocation4() 메소드이며, 버튼 클릭시 실행되게 됩니다.

function getLocation4() {

if (navigator.geolocation) {

//브라우져가 geolocation을 지원하는지 확인한 후 

navigator.geolocation.watchPosition(showPosition4);

//지원할 경우에 watchPosition 메소드를 실행합니다. watchPosition은 변화되는 좌표를 계속적으로 업데이트 해줍니다.

getCurrentPosition은 단 한번 좌표를 알려줍니다.


} else {

x4.innerHTML = "이 브라우저는 위치추적이 지원되지 않습니다.";

//지원되지 않는 브라우져의 경우에는 사용자에게 알려주게 됩니다. 여기서 x4는 위에서 얻어온 demo4문단입니다.

}

}


function showPosition4(position) {

var forLatlng = document.getElementById("text1");

var forAddress = document.getElementById("text2");

//body의 두 문단을 하나는 좌표를 위해, 하나는 주소를 위해 사용하기 위해 변수로 얻습니다.

forLatlng.innerHTML = ": Latitude: " + position.coords.latitude+ "_$tag_Longitude: " + position.coords.longitude;

/*좌표를 출력합니다.

여기서는 position.coords.latitude와 position.coords.longitude이 사용되었습니다.

즉, 위도와 경도를 각 각 출력합니다.

*/


var geocoder = new google.maps.Geocoder();

//geocoder를 사용하기 위해 변수를 선언하고 구글 맵 api에서 객체를 얻어 옵니다.

var latlng = new google.maps.LatLng(position.coords.latitude,

position.coords.longitude);

//위도와 경도를 구글 맵스의 geocoder에서 사용할 형식으로 변환합니다.

geocoder.geocode({'latLng' : latlng}, function(results, status) 

{

if (status == google.maps.GeocoderStatus.OK) {

/*

좌표를 주소로 변환 시키는 geocoder를 실행합니다.

만약 성공적으로 변환이 되었다면, status라는 상태변수가 참이 되어 아래의 코드들이 실행됩니다.

*/

if (results[1]) {

forAddress.innerHTML = results[3].formatted_address;

//만약 반환된 결과값이 비어있지 않으면 innerHTML을 이용해 결과값을 출력합니다.

}

} else {

alert("Geocoder failed due to: " + status);

//만약 geocoder가 실패시 알림창을 출력합니다.

}

});


}

</script>


</body>

</html>


이상 geolocation을 활용해 좌표를 얻고, 얻어진 좌표로 주소를 얻는 geocoder 예제 였습니다.



'programming' 카테고리의 다른 글

좌표 정보를 주소로 변환하기.  (0) 2012.10.23
by 두잇투데이 2012.10.23 07:24