[ kakaoMap API ] geolocation 사용

📌 Geolocation은 HTML에서 제공해주는 함수이기 때문에 메뉴얼 참고하기

 

연습용으로 해본거라 정보가 미흡하네요 😅

 

/*
* kakaoMap 로드 설정
* 모든 변수를 전역변수로 선언함
*/
kakao.maps.load(
    function() {
        mapTypeControl = new kakao.maps.MapTypeControl();
        zoomControl = new kakao.maps.ZoomControl();
        mapContainer = document.getElementById('div ID');
        mapOption = {
                center:~~~
                level:~~~~~~
          };
        // v3가 모두 로드된 후 이 콜백함수가 실행됨
        map = new kakao.maps.Map(mapContainer, mapOption);
    });

 

 

/*
 *GPS에 사용할 변수설정
 */
    var gps_use = null;      //GPS의 사용가능 여부
    var gps_lat = null;       //GPS 위도
    var gps_lng = null;     //GPS 경도
    var gps_position;      //GPS 위치 객체
    var default_position     //GPS 위치가 없을 때, 기본 위치

 

 

/*
* GPS가 이용가능한지 체크하는 함수
* 이용가능하면  showGPSLocation() 함수를 불러오고,
*  이용할 수 없으면 경고창을 띄우고, 에러가 있다면 errorHandler() 함수를 불러온다.
*/

function showGPSLocation(position) {
       gps_use = true;
       gps_lat = position.coords.latitude;
       gps_lng =  position.coords.longitude;  

      gps_position = new kakao. maps.LatLng(gps_lat, gps_lng);  // geolocation으로 얻어온 좌표값
      map.setCenter(gps_position); // 지도의 중심좌표값
}

/*
* code == 1 : 사용자가 위치정보 공유를 허가하지 않은 경우
* code == 2 : 사용자의 위치를 판단하지 못했을 경우
*/

function errorHandler(error) {

   default_position = new kakao.maps.LatLng(위도, 경도);  //GPS 위치가 없을 때, 기본 위치
 
   if(error.code == 1) {
         alert("사용자가 위치 정보 검색을 거부했습니다");
         map.setCenter(default_position);
    } else if (error.code == 2) {
         alert("위치를 찾을 수 없습니다​");
         map.setCenter(default_position);
    }

    gps_use = false ;

}

 

/*
* map 실행
*/

function initMap() {
     
     if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showGPSLocation, errorHandler, options(선택));
     } else {
            alert("위치를 찾을 수 없습니다");
            default_position = new kakao.maps.LatLng(위도, 경도);
           map.setCenter(default_position);

     }

}