반응형
지도에는 컨트롤(지도 타입 컨트롤, 지도 줌 컨트롤)을 추가할 수 있는데, Map 생성 시 옵션으로 설정하는 것이 아닌 생성된 Map 객체의 addControl 메서드로 컨트롤을 추가하는 방식이라 네이버 지도와는 순서의 차이가 있다.
지도 내에서 컨트롤이 표시될 위치는 addControl 메서드의 두번째 파라미터에 위치값으로 설정하면 된다.
| 위치값 | 지도 내 컨트롤 위치 | 컨트롤 추가시 |
| kakao.maps.ControlPosition.TOP | 지도의 위 가운데 위치 | 기존 컨트롤의 아래로 추가됨 |
| kakao.maps.ControlPosition.TOPLEFT | 지도의 왼쪽 위 위치 | 기존 컨트롤의 오른쪽으로 추가됨 |
| kakao.maps.ControlPosition.TOPRIGHT | 지도의 오른쪽 위 위치 | 기존 컨트롤의 왼쪽으로 추가됨 |
| kakao.maps.ControlPosition.LEFT | 지도의 왼쪽 위 위치 | 기존 컨트롤의 아래로 추가됨 |
| kakao.maps.ControlPosition.RIGHT | 지도의 오른쪽 위 위치 | 기존 컨트롤의 아래로 추가됨 |
| kakao.maps.ControlPosition.BOTTOMLEFT | 지도의 왼쪽 아래 위치 | 기존 컨트롤의 오른쪽으로 추가됨 |
| kakao.maps.ControlPosition.BOTTOM | 지도의 아래 가운데 위치 | 기존 컨트롤의 위로 추가됨 |
| kakao.maps.ControlPosition.BOTTOMRIGHT | 지도의 오른쪽 아래 위치 | 기존 컨트롤의 왼쪽으로 추가됨 |
◆ 지도 타입 컨트롤 (MapTypeControl) 추가
var mapContainer = document.getElementById('mainMap') //지도를 표시할 영역의 div
var mapOption = {
//지도 옵션 설정
center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표를 지정(위도, 경도)
level: 3, //지도의 초기 줌 레벨을 지정
};
//지도를 표시할 영역의 div와 지도 옵션으로 지도를 생성
var map = new kakao.maps.Map(mapContainer , mapOption);
//일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도 타입 컨트롤을 생성
var mapTypeControl = new kakao.maps.MapTypeControl();
//생성한 지도 타입 컨트롤을 지도에 추가
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
◆ 지도 줌 컨트롤 (ZoomControl) 추가
var mapContainer = document.getElementById('mainMap') //지도를 표시할 영역의 div
var mapOption = {
//지도 옵션 설정
center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표를 지정(위도, 경도)
level: 3, //지도의 초기 줌 레벨을 지정
};
//지도를 표시할 영역의 div와 지도 옵션으로 지도를 생성
var map = new kakao.maps.Map(mapContainer , mapOption);
//지도 확대 축소를 제어할 수 있는 지도 줌 컨트롤을 생성
var zoomControl = new kakao.maps.ZoomControl();
//생성한 지도 줌 컨트롤을 지도에 추가
map.addControl(zoomControl, kakao.maps.ControlPosition.TOPRIGHT);
참고로, 마우스 휠을 사용해 지도를 확대/축소할 수도 있는데, 지도 생성 시 draggable: false 옵션을 설정하거나 map.setZoomable(false);를 사용하면 마우스 휠을 통한 줌 조작은 막을 수 있지만, 줌 컨트롤의 확대/축소 버튼을 이용한 조작에는 영향을 주지 않는다.
◆ 예제
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY"></script>
</head>
<body>
<div id="mainMap" style="width:100%;height:700px;"></div>
<script>
$(document).ready(function() {
var mapContainer = document.getElementById('mainMap');
var mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 3
};
var map = new kakao.maps.Map(mapContainer, mapOption);
//지도 타입 컨트롤 추가
var mapTypeControl = new kakao.maps.MapTypeControl();
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
//지도 줌 컨트롤 추가
var zoomControl = new kakao.maps.ZoomControl();
map.addControl(zoomControl, kakao.maps.ControlPosition.TOPRIGHT);
});
</script>
</body>
</html>
[카카오 지도] KAKAO 지도 앱 키(APP KEY) 발급 및 WEB 플랫폼 등록 방법
[카카오 지도] KAKAO 지도에 컨트롤(지도타입, 줌) 추가 + 예제
참조
ControlPosition
https://apis.map.kakao.com/web/documentation/#ControlPosition
ZoomControl
https://apis.map.kakao.com/web/documentation/#ZoomControl
MapTypeControl
https://apis.map.kakao.com/web/documentation/#MapTypeControl
반응형
'▹ 주요 언어 > JavaScript' 카테고리의 다른 글
| [카카오 지도] KAKAO 지도 생성하기 + 예제 (1) | 2025.01.28 |
|---|---|
| [카카오 지도] KAKAO 지도 앱 키(APP KEY) 발급 및 WEB 플랫폼 등록 방법 (1) | 2025.01.28 |
| [네이버 지도] NAVER 지도 초기화 하기 + 예제 (1) | 2025.01.10 |
| [네이버 지도] NAVER 지도 이미지를 마커(Marker)로 사용하기 + 예제 (0) | 2024.09.15 |
| [네이버 지도] NAVER 지도에 마커(Marker) 표시하기 (단일,다중마커) + 예제 (0) | 2024.09.13 |