Notice
Recent Posts
Recent Comments
Tags more
«   2026/01   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Archives
Today
Total
관리 메뉴

웹개발자의 기지개

현재 GPS 좌표값 얻기 3 - navigator.geolocation [다음지도 표시] 본문

javascript

현재 GPS 좌표값 얻기 3 - navigator.geolocation [다음지도 표시]

웹개발자 워니 2018. 12. 29. 01:23

이번에는 다음지도 api 를 이용해서, navigator.geolocation 를 통하여 현재 GPS 좌표 정보를 지도 그래픽을 이용해서

확인해 보도록 하자.


일단 먼저,  https 보안서버 주소가 되어야 한다.


 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>geolocation으로 마커 표시하기</title>
   
</head>
<body>
<p style="margin-top:-12px">
    <b>Chrome 브라우저는 https 환경에서만 geolocation을 지원합니다.</b> 참고해주세요.
</p>


<div id="map" style="width:100%;height:600px;"></div>
<div id="digit"></div>


<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=다음api키값"></script>
<script>
var lat = "";
var lon = "";


var mapContainer = document.getElementById('map'), // 지도를 표시할 div
    mapOption = {
        center: new daum.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 5 // 지도의 확대 레벨
    };

var map = new daum.maps.Map(mapContainer, mapOption); // 지도를 생성합니다


// HTML5의 geolocation으로 사용할 수 있는지 확인합니다
if (navigator.geolocation) {
   
    // GeoLocation을 이용해서 접속 위치를 얻어옵니다
    navigator.geolocation.getCurrentPosition(function(position) {
       
        lat = position.coords.latitude;    // 위도
        lon = position.coords.longitude; // 경도
       
        var locPosition = new daum.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
         message = '<div style="padding:5px;width:220px;">'+ lat + ' / ' + lon +'</div>'; // 인포윈도우에 표시될 내용입니다
       
        // 마커와 인포윈도우를 표시합니다
        displayMarker(locPosition, message);


        var idGap = document.getElementById("digit");
             idGap.innerHTML = "위도 : "+ lat +" , 경도 : " + lon;   
      });
   
} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
   
    var locPosition = new daum.maps.LatLng(33.450701, 126.570667),   
        message = 'geolocation을 사용할수 없어요..'
       
    displayMarker(locPosition, message);
}


// 지도에 마커와 인포윈도우를 표시하는 함수입니다
function displayMarker(locPosition, message) {


    // 마커를 생성합니다
    var marker = new daum.maps.Marker({ 
        map: map,
        position: locPosition
    });
   
    var iwContent = message, // 인포윈도우에 표시할 내용
        iwRemoveable = true;

    // 인포윈도우를 생성합니다
    var infowindow = new daum.maps.InfoWindow({
        content : iwContent,
        removable : iwRemoveable
    });
   
    // 인포윈도우를 마커위에 표시합니다
    infowindow.open(map, marker);
   
    // 지도 중심좌표를 접속위치로 변경합니다
    map.setCenter(locPosition);     
}   

</script>


</body>
</html>



'javascript' 카테고리의 다른 글

[PHP, Javascript] 네이버 스마트에디터2 - 사진첨부 기능 포함(PHP업로드) , 글수정파일  (0) 2019.01.03
[PHP, Javascript] 네이버 스마트에디터2 - 사진첨부 기능 포함(PHP업로드) , 글쓰기파일  (0) 2019.01.03
현재 GPS 좌표값 얻기 2 - navigator.geolocation  (0) 2018.12.29
현재 GPS 좌표값 얻기 1 - navigator.geolocation  (0) 2018.12.28
체크박스 여러개중에 체크한것만 삭제하기  (0) 2018.12.21
'javascript' Related Articles more
Comments