어쩌다 보니 기회가 생겨서 드디어 생애 첫 지도 기능 개발을 하게 되었다.
GIS 개발이라기엔 넘나 기초적인 기능이지만...
난 카카오가 좋으니까 카카오 지도를 사용하여 개발을 진행했다.
이건 내가 까먹을까봐 정리하는 카카오 지도 연동 및 사용법이다.
Step 1 API 키 발급 및 도메인 추가
먼저, kakao developers console에 접속하여 로그인 후 내 애플리케이션 메뉴로 들어가서 애플리케이션 추가를 해야 한다.
카카오계정 로그인
여기를 눌러 링크를 확인하세요.
accounts.kakao.com
추가가 완료되면 내가 추가한 어플리케이션을 클릭하여 요약 정보에 들어간다.
요약 정보 메인 화면에 앱 키가 있는데, 여기서 웹 개발을 할 것이라면 JavaScript 키를 사용하면 된다.
(안드로이드, iOS는 네이티브 앱 키를 사용하면 된다.)
그리고 왼쪽 메뉴에서 플랫폼을 클릭하여 하단에 있는 Web에 도메인 주소를 등록한다.
로컬 도메인과 배포용 도메인을 둘 다 추가하면 된다. (로컬 개발에만 사용할 예정이라면 로컬 도메인만 추가)
여기서 주의점!
Path 부분을 제외한 도메인 부분만 입력하고, http / https 구분을 해야 한다.
이제 콘솔에서 할 일은 끝! 참고로 카카오맵 지도 API documentation은 아래 주소로 접속하면 된다.
사실 Step1에 써놓은 설명들도 친절하게 docs에 써있다. (머쓱...)
Step 2. 지도 띄우기
이제 웹에 간단하게 지도를 띄워보자!
먼저, 지도를 생성할 영역을 HTML 파일에 만들어 주자.
<div id="map"></div>
그리고 자바스크립트 파일을 import하는 가장 최상단에 아래 스크립트를 추가한다.
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>
이제 지도를 띄우기 위한 자바스크립트 파일을 생성해서 코드를 작성한다.
위에 추가한 스크립트 아래에 import 해주면 된다.
const resultMap = document.querySelector('.result-map')
const map = new kakao.maps.Map(resultMap, {
center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
level: 5
})
한 HTML 파일에 한꺼번에 코드를 넣을 수도 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kakao 지도 시작하기</title>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>
</head>
<body>
<div id="map" style="width:500px;height:400px;"></div>
<script>
const resultMap = document.querySelector('.result-map')
const map = new kakao.maps.Map(resultMap, {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심
level: 5
})
</script>
</body>
</html>
여기까지 진행하면 이렇게 지도를 띄울 수 있따!
Step 3. 간단한 지도 기능 구현
이제 지도도 띄웠으니 간단한 기능을 구현할 수 있다.
예를 들어 지도 줌 인/아웃이나 현재 위치 받아오는 기능 등을 카카오맵 API를 이용하여 쉽게 구현할 수 있다.
① 줌 인/아웃 구현
사실 카카오 맵에서는 기본적으로 지도 줌 인/아웃이 가능한 인터페이스를 제공한다.
하지만 위의 스크린샷처럼 버튼을 커스텀해서 사용하고 싶을 경우, 아래 코드를 이용하여 구현하면 된다.
getLevel() 메소드를 사용하여 현재 지도의 줌 값을 얻을 수 있고, setLevel(n) 메소드를 사용하여 지도의 줌 레벨을 조절할 수 있다.
map.setLevel(map.getLevel() + 1) // 줌 아웃
map.setLevel(map.getLevel() - 1) // 줌 인
기본 제공 인터페이스는 다음 코드로 사용할 수 있다.
// 일반 지도 ↔ 스카이뷰 전환 버튼 생성
const mapTypeControl = new kakao.maps.MapTypeControl()
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT)
// 지도 줌 인/아웃 버튼 생성
const zoomControl = new kakao.maps.ZoomControl()
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT)
② 지도 드래그 막기
지도 드래그는 아래 코드 한 줄로 on/off가 가능하다.
map.setDraggable(draggable) // draggable = true(드래그 가능) / false(드래그 불가)
③ 현재 사용자의 위치 받아오기
사용자의 위치를 받아오기 위해서는 HTML의 geolocation API를 이용하면 된다.
navigator.geolocation.getCurrentPosition에 아래 함수를 매개변수로 전달해주면 된다.
const locationLoadSuccess = pos => {
const currentPos = new kakao.maps.LatLng(pos.coords.latitude,pos.coords.longitude)
map.panTo(currentPos)
}
navigator.geolocation.getCurrentPosition(locationLoadSuccess)
기능이 정상적으로 실행되면 아래 화면처럼 위치 권한 요청 팝업이 뜨는데, 허용을 클릭하면 현재 내가 접속한 위치로 지도 위치가 바뀐다!
주의할 사항으로는, geolocation 기능은 로컬 환경을 제외하고 HTTPS에서만 사용할 수 있다.
④ 마커 띄우기
다음과 같은 방법으로 위도 / 경도 값을 갖는 마커를 생성하여 지도 위에 표시할 수 있다.
const marker = new kakao.maps.Marker({
position: new kakao.maps.LatLng(33.450701, 126.570667) // 위도, 경도 입력
})
marker.setMap(map)
생성된 마커 제거는 다음 코드처럼 하면 된다.
marker.setMap(null)
⑤ 주소 정보를 이용하여 마커 띄우기
마커를 원하는 지도상의 위치에 띄우기 위해서는 좌표값이 필요하다. (경도 / 위도)
하지만, 좌표값이 없고 주소 정보(서울시 동작구 ~~~)만 존재하는 경우에도 카카오맵의 주소 변환 API를 이용하여 마커를 띄울 수 있다.
이 기능을 사용하기 위해서는 geocoder라는 서비스가 필요한데, step2에서 등록했던 앱 키를 포함한 외부 자바스크립트 코드 뒤에 &libraries=services를 붙여야 사용할 수 있다.
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다.&libraries=services"></script>
안 그러면 아래와 같은 오류가 뜰 것이다 ㅠ
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'Geocoder')
주소로 좌표 검색 코드는 아래와 같다.
const geocoder = new kakao.maps.services.Geocoder()
geocoder.addressSearch('서울시 동작구~', (res, stat) => {
if (stat === kakao.maps.services.Status.OK) {
const coords = new kakao.maps.LatLng(res[0].y, res[0].x);
const marker = new kakao.maps.Marker({
map: map,
position: coords
})
const infowindow = new kakao.maps.InfoWindow({
content: `<div style="width:150px;text-align:center;padding:6px 0;">${e.name}</div>`
})
infowindow.open(map, marker)
}
})
반대로, 좌표값으로 주소 정보를 구할 수도 있다.
searchDetailAddrFromCoords(mouseEvent.latLng, function(result, status) {
if (status === kakao.maps.services.Status.OK) {
const detailAddr = !!result[0].road_address ? `<div>도로명주소 : ${result[0].road_address.address_name}</div>\n지번 주소 : ${result[0].address.address_name}`
const content = `<div class="bAddr">법정동 주소정보 : ${detailAddr}</div>`
marker.setPosition(mouseEvent.latLng)
marker.setMap(map)
infowindow.setContent(content)
infowindow.open(map, marker)
}
})
'Project > 지도 서비스 개발' 카테고리의 다른 글
| Geoserver - 1. ubuntu 환경에서 geoserver 설치 및 환경설정 (0) | 2021.07.12 |
|---|
