[API] 2. 기상청 단기예보 조회 서비스 - KakaoMap API

 

---

1. Kakao Developer

 

https://developers.kakao.com/

Kakao Developers

Kakao Developer에서 애플리케이션을 등록한 후, JavaScript 키를 복사한다. 

 

내 애플리케이션 > 앱 설정 > 플랫폼에서 개발 시 사용할 도메인을 추가한다. 

 

---

2. HTML에 지도 그리기 

 

https://apis.map.kakao.com/web/guide/

카카오지도 가이드를 통해 어떤 방식으로 코드를 작성하는지 알 수 있다. 

우선, HTML 화면에 <script>태그를 작성하여 카카오지도를 호출한다.

 

(1) JavaScript API 불러오기

발급받은 APP KEY(JavaScript Key)를 넣는다.

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>

 

(2) 지도 영역 그리기

지도를 담을 div에 id를 "map"으로 지정한다.  

<div id="map" style="width:500px;height:400px;"></div>

 

(3) JS 지도 코드 작성

JavaScript 코드를 작성하여 카카오 지도를 띄운다

var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
	center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
	level: 3 //지도의 레벨(확대, 축소 정도)
};

var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴

 

아래는 지역명을 입력했을 시 지역명에 따른 지도를 조회하는 코드이다.

메인 화면에서 검색화면으로 이동시 URL에 parameter로 포함시켜 검색하게끔 한다. 

또한 GeoLocation을 통해 현재 위치를 수집한다. 

따라서 지역명이 아닌 검색어를 입력 시 현재 위치를 수집하여 지도를 조회한다. 

// url에 location이라는 이름에 검색어를 포함한다
let locationParam = new URLSearchParams(window.location.search).get('location');

// 검색창에 검색어 고정 (생략 가능)
searchText = locationParam;
inputObjSearchText.value = searchText;

// 주소-좌표 변환 객체를 생성합니다
let geocoder = new kakao.maps.services.Geocoder();

// 주소로 좌표를 검색합니다
geocoder.addressSearch(searchText, function(result, status) {

    // 정상적으로 검색이 완료됐으면
    if (status === kakao.maps.services.Status.OK) {

        console.log("정상적으로 검색");

        var coords = new kakao.maps.LatLng(result[0].y, result[0].x);

        // 결과값으로 받은 위치를 마커로 표시합니다
        var marker = new kakao.maps.Marker({
            map: map,
            position: coords
        });

        // 인포윈도우로 장소에 대한 설명을 표시합니다
        var infowindow = new kakao.maps.InfoWindow({
            content: '<div style="width:150px;text-align:center;padding:6px 0;">'+searchText+'</div>'
        });
        infowindow.open(map, marker);

        // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
        map.setCenter(coords);
    }else {
        console.log("정상적으로 검색X - 지역명이 아닌 검색어 입력 시");
        if(navigator.geolocation){

            inputObjSearchText.value = "현재 위치";

            // GeoLocation을 이용해서 접속 위치를 얻어옵니다
            navigator.geolocation.getCurrentPosition(function (position){
                let lat = position.coords.latitude;     // 위도
                let lon = position.coords.longitude;    // 경도

                coords = new kakao.maps.LatLng(lat, lon);

                // 마커 표시
                marker = new kakao.maps.Marker({
                    map: map,
                    position: coords
                });

                // 인포윈도우 표시
                infowindow = new kakao.maps.InfoWindow({
                    content: '<div style="width:150px;text-align:center;padding:6px 0;">현재 위치</div>'
                })
                infowindow.open(map, marker);

                // 지도 중심좌표 이동이키기
                map.setCenter(coords);

            }, function (error) {
                alert("현재 위치 검색을 허용해주십시오");
                console.log("Error: 위치 액세스 거부");
            })
        }
    }
});

(현재 위치는 가렸습니다)