본문 바로가기
공부/HTML5

현재 위치를 알려 주는 geolocation

by Ohming 2011. 11. 5.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
geolocation의 기본 사용법
 <!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
    <title>현재 위치</title>
        <script type = "text/javascript">
        if(navigator.geolocation){    //당신의 현재 위치를 알아내기 위한 객체
        function showYourPosition(position){
            alert("당신의 위치를 알려드리겠습니다");
            alert("위도:"+position.coords.latitude);    //위도표시
            alert("위도:"+position.coords.longitude);    //경도표시
        };
        navigator.geolocation.getCurrentPosition(showYourPosition);    //현재 위치정보 습득
        //getCurrentPosition을 이용하여 사용자의 현재 위치를 알아내어 showYourPosition으로 위치정보를 알려준다.
        } else {
        document.write("죄송합니다. 사용하고 계신 브라우저는 geolocation을 지원하지 않습니다");
        };
        </script>
</head>
<body>

</body>
</html>

네이버 지도 API를 사용해보려 했는데 무슨 문제인지 지도가 뜨질않아서
다음 지도 API를 사용해서 구현해 놓은걸로 올림.
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> geolocation </title>
 </head>
 <style type="text/css"> html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map { width: 100%; height: 100% }
</style>
 <script type="text/javascript" src="http://apis.daum.net/maps/maps3.js?apikey=본인의 KEY를 넣으세요" charset="utf-8"></script>
 <script type="text/javascript">
    var map;
    function get_geo(){
        navigator.geolocation.getCurrentPosition(successCallback, null, null)
    }
    function successCallback(position)
    {
        alert(position.coords.latitude + ' ' + position.coords.longitude);
        map = new daum.maps.Map(document.getElementById('map'), {
            center: new daum.maps.LatLng(position.coords.latitude, position.coords.longitude)
        });
        var icon=new daum.maps.MarkerImage(
            'flag.png',
            new daum.maps.Size(20,30),
            new daum.maps.Point(32,64)
        );
        var marker = new daum.maps.Marker({
            position: new daum.maps.LatLng(position.coords.latitude, position.coords.longitude),
            image : icon
        });
        marker.setMap(map);
            
        var infowindow = new daum.maps.InfoWindow({
            content: '<p style="margin:7px 22px 7px 12px;font:12px/1.5 sans-serif"><strong>안녕하세요~</strong><br/>다음커뮤니케이션입니다.</p>',
            removable : true
        });
        
        daum.maps.event.addListener(marker, "click", function() {
            infowindow.open(map, marker);
        });
        daum.maps.event.addListener(map, "click", function() {
            infowindow.close();
        });
    }
  </script>
 <body onLoad="get_geo()">
  <div id="map"></div>
 </body>
</html>
결과 화면


'공부 > HTML5' 카테고리의 다른 글

HTML5 발표 참고자료  (0) 2012.03.14
웹표준) div 가운데 정렬  (0) 2012.03.11
액티브엑스가 필요 없는 내장 미디어  (0) 2011.11.05
웹 폼  (0) 2011.11.05
그림자와 그라데이션 구현하기  (0) 2011.11.05

관련글

댓글

티스토리툴바