Notice
Recent Posts
Recent Comments
Link
Everything has an expiration date
[KakaoMapStudy] 20240208 [프로그램 소스] 본문
KakaoMapStudy
체크할 사항
Ⅰ. 카카오 맵 Api 를 웹 사이트에 표현하기 - 기본
1. 지도가 그려질 공간을 div로 구성한다. id는 `"map"` 으로 설정한다.
→ `<div id="map">`
<div id="map" style="width: 100%; height: 350px;"></div>2. 스크립트 영역에서 지도를 표시할 div 의 객체를 가져온 후
지도의 중심 좌표 `center` 와 지도의 확대 축소 레벨 `level` 을 설정한다.
① 지도의 중심 좌표 설정
center = new kakao.maps.LatLng(37.5566126,126.9196347),② 지도의 레벨 설정
level: 3,3. 지도를 그릴 대상 div 와 옵션을 `Map` 에 매개변수로 전달하여 지도를 생성한다.
var map = new kakao.maps.Map(container, options);카카오 맵 Api 를 웹 사이트에 표현하기 - 기본 [전체 script 소스]
<script type="text/javascript">
function initialize()
{
container = document.getElementById("map");
options =
{
// 위도 경도
// ───────── ──────────
center: new kakao.maps.LatLng(37.5566126, 126.919634),
//--> ① 지도의 중심 좌표 설정
level: 3,
//--> ② 지도의 레벨 설정
};
// 지도를 그릴 대상 div 와 옵션을 넘겨주며 지도 생성
map = new kakao.maps.Map(container, options);
}
</script>
Ⅱ. 카카오 맵 API 의 지도 중심위치 변경 메소드
| 메소드 | 기능 |
| map = new kakao.maps.Map(container, options) | container 엘리먼트에 options 에 해당하는 설정값들을 지정하여 지도를 생성한다. |
| moveLatLng = new kakao.maps.LatLng(int latitude, int longitude) | 매개변수로 전달한 위도(latitude), 경도(longitude)에 맞는 지도의 중심 좌표 객체를 생성한다. |
| map.setCenter(moveLatLng) | 매개변수로 전달받은 중심 좌표 객체로 지도 중심(center) 좌표를 변화시킨다. |
| map.panTo(moveLatLng) | 지도 중심 좌표를 매개변수로 전달받은 중심 좌표 객체로 부드럽게 이동시킨다. |
Ⅲ. 카카오 맵 API의 지도 정보를 가져오는 메소드
| 메소드 | 기능 |
| map.getLevel() | 지도의 확대·축소 레벨을 가져온다 |
| map.setLevel(int level) | 지도의 확대·축소 레벨을 설정한다. |
| center = map.getCenter() | 지도의 현재 중심 좌표 얻어오기 |
| map.getMapTypeId() | 지도의 타입 얻어오기 |
| bounds = map.getBounds() | 지도의 현재 영역 얻어오기 |
| center.getLat() | 지도 중심좌표의 위도 얻어오기 |
| center.getLng() | 지도 중심좌표의 경도 얻어오기 |
| bounds.getSouthWest() | 얻어낸 현재 영역의 남서쪽 좌표 얻어오기 |
| bounds.getNorthEast() | 얻어낸 현재 영역의 북동쪽 좌표 얻어오기 |
Ⅳ. 카카오 맵 API 지도 타입 컨트롤 생성
지도 타입 컨트롤 생성 - 일반 지도와 스카이 뷰로 타입 전환
`MapTypeControl()`
mapTypeControl = new kakao.maps.MapTypeControl();
지도 위에 레이어를 두는 형식으로 컨트롤을 구성하게 되는 추가적인 컨트롤이다.
맵 위에 구성하겠다는 설정을 하지 않으면 시각적으로 확인이 불가능하다.
지도 타입 컨트롤을 지도 위에 올리기(즉, 지도에 표시)
map.addControl(mapTypeControl);
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
우측 상단에 지도 타입 컨트롤이 위치하도록 설정한 것이다.
이전에 Positon 을 지정하지 않았을 때와 동일한 것으로 미루어 보아 default 값임을 알 수 있다.
KakaoMapApp
실행결과 스크린샷
WebContent
MapTest00.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest00.html</title>
</head>
<body>
<!-- ○ 발급받은 App Key -->
<!-- appKey=f14679fbdf06ac31ce61d88a87c1e662 -->
<!-- ○ 지도의 중심 좌표 -->
<!-- 37.5566126,126.9196347 -->
<!--
중심 좌표를 알아야, 어느 범위의 지도가 필요한지를 알 수 있다.
중심 좌표 외에도, 좌측 상단, 우측 상단 좌표를 동시에 받아와서 처리할 수도 있지만
범용적으로 사용되는 것은 중심 좌표이다.
[dapi] : daum api 를 줄인 것.
-->
<div>
<h1>Kakao Map 생성 기본 관찰</h1>
<p>지도 생성 기본 내용 관찰</p>
<hr>
</div>
<!-- 지도를 그릴 (랜더링 할) div 공간 확보(지정) -->
<div id="map" style="width: 100%; height: 350px;"></div>
<!-- <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY 사용"></script> -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=f14679fbdf06ac31ce61d88a87c1e662"></script>
<script type="text/javascript">
var mapContainer = document.getElementById("map"); // 지도를 표시할 div
var mapOption =
{
center: new daum.maps.LatLng(37.5566126, 126.9196347), // 지도의 중심좌표
level: 3, // 지도의 확대축소 레벨
};
// 지도를 표시할 div 와 지도 옵션을 활용하여 지도 생성
var map = new daum.maps.Map(mapContainer, mapOption);
</script>
</body>
</html>
실행결과 스크린샷
WebContent
MapTest01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest01.html</title>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=f14679fbdf06ac31ce61d88a87c1e662"></script>
<script type="text/javascript">
var mapContainer = document.getElementById("map"); // 지도를 표시할 div
var mapOption =
{
center: new daum.maps.LatLng(37.5566126, 126.9196347), // 지도의 중심 좌표
level: 3, // 지도의 확대축소 레벨
};
// 지도를 표시할 div 와 지도 옵션을 활용하여 지도 생성
var map = new daum.maps.Map(mapContainer, mapOption);
</script>
</head>
<body>
<!-- ○ 발급받은 App Key -->
<!-- appKey=f14679fbdf06ac31ce61d88a87c1e662 -->
<!-- ○ 지도의 중심 좌표 -->
<!-- 37.5566126,126.9196347 -->
<div>
<h1>Kakao Map 생성 기본 관찰</h1>
<p>지도 생성 기본 내용 관찰 → 지도 그려지지 않음~!!!</p>
<hr>
</div>
<!-- 지도를 그릴 (랜더링 할) div 공간 확보(지정) -->
<div id="map" style="width: 100%; height: 350px;"></div>
<!-- check~!!! -->
<!-- 지도가 그려지지 않음~!!! -->
<!-- <script> 를 실행할만한 트리거와 같은 것을 구성하지 않았기 때문에
실행되지 않은 것이다.
MapTest00.html 에서는 body를 읽어들이는 과정에서 스크립트가 실행됐기 때문에
지도가 그려졌던 것이다.
-->
</body>
</html>실행결과 스크린샷
WebContent
MapTest02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest02.html</title>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=f14679fbdf06ac31ce61d88a87c1e662"></script>
<script type="text/javascript">
function initialize()
{
container = document.getElementById("map");
options =
{
// 경로 클래스
// ───── ******
center: new kakao.maps.LatLng(37.5566126, 126.919634), // 지도의 중심 좌표
level: 3, // 지도의 확대 축소 레벨
};
// 지도를 그릴 대상 div 와 옵션을 넘겨주며 지도 생성
map = new kakao.maps.Map(container, options);
}
</script>
</head>
<body onload="initialize()">
<div>
<h1>Kakao Map 생성 기본 관찰</h1>
<p>지도 생성 기본 내용 관찰</p>
<hr>
</div>
<!-- ○ 발급받은 App Key -->
<!-- appKey=f14679fbdf06ac31ce61d88a87c1e662 -->
<!-- ○ 지도의 중심 좌표 -->
<!-- 37.5566126,126.9196347 -->
<!-- 지도를 그릴 div 공간 확보(지정) -->
<div id="map" style="width: 100%; height: 350px;"></div>
</body>
</html>
실행 결과 스크린샷
WebContent
MapTest03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest03.html</title>
</head>
<body>
<!-- ○ 발급받은 App Key -->
<!-- appKey=f14679fbdf06ac31ce61d88a87c1e662 -->
<!-- ○ 지도의 중심 좌표 -->
<!-- 37.5566126,126.9196347 -->
<div>
<h1>Kakao Map 생성 기본 관찰</h1>
<p>지도 생성 기본 내용 관찰</p>
<hr>
</div>
<!-- 지도를 그릴 div 공간 확보(지정) -->
<div id="map" style="width: 300px; height: 300px;"></div>
<!-- 발급받은 key 를 활용하여 리소스 참조 -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=f14679fbdf06ac31ce61d88a87c1e662"></script>
<script type="text/javascript">
// 지도를 표시할 div
var container = document.getElementById("map");
// latitude : 위도
// longitude : 경도
var options =
{
// 지도의 중심 좌표
//center: new daum.maps.LatLng(37.5566126,126.9196347), //-- 구 버전
center: new kakao.maps.LatLng(37.5566126,126.9196347),
// 지도의 확대축소 레벨
// (cf. GoogleMap 이나 NaverMap 은 level 이 아니라 zoom 으로 구성)
level: 3,
};
// 지도를 그릴 대상 div 와 관련 옵션을 넘겨주며 지도 생성
//var map = new daum.maps.Map(container, options); //-- 구 버전
var map = new kakao.maps.Map(container, options);
</script>
</body>
</html>
실행결과 스크린샷
0123456789
WebContent
MapTest04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest04.html</title>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=f14679fbdf06ac31ce61d88a87c1e662"></script>
<script type="text/javascript">
function initialize()
{
// 전부 전역변수로 선언해 둔 상태
container = document.getElementById("map");
options =
{
center: new kakao.maps.LatLng(37.5566126,126.9196347),
level: 3,
};
map = new kakao.maps.Map(container, options);
}
function setCenter()
{
// 확인
//alert("함수 호출 확인~!!!");
// 중심을 이동할 위도 경도 위치 생성(라인 프렌즈)
var moveLatLng = new kakao.maps.LatLng(37.5555359,126.9215387);
//--> 아직까지는 객체 구성만 이루어진 상태이다. center 값이 반영되지 않는다.
// 지도 중심 이동
map.setCenter(moveLatLng);
//--> 좌표 값으로 구성된 객체를 매개변수로 넘겨서 지도 중심이 이동된다.
}
function panTo()
{
// 중심을 이동할 위도 경도 위치 생성(2번출구 앞 스타벅스)
var moveLatLng = new kakao.maps.LatLng(37.5571496,126.9236038);
// 지도 중심 이동
//map.setCenter(moveLatLng);
// 지도 중심을 부드럽게 이동
//-- 이동 과정에서 이동할 거리가 지도에서 표현되는 범위 밖에 있다면
// 즉, 이동 거리가 지도 화면보다 크다면
// 부드러운 효과가 적용되지 않고 이동하게 된다.
map.panTo(moveLatLng);
}
function panTo2()
{
// 중심을 이동할 위도 경도 위치 생성(홍대입구 사거리 북창동 순두부)
var moveLatLng = new kakao.maps.LatLng(37.5551839,126.9209445);
map.panTo(moveLatLng);
}
function panTo3()
{
// 중심을 이동할 위도 경도 위치 생성(여의도 국회의사당)
var moveLatLng = new kakao.maps.LatLng(37.5317348,126.9142102);
map.panTo(moveLatLng);
}
</script>
</head>
<body onload="initialize()">
<!-- ○ 발급받은 App Key -->
<!-- appKey=f14679fbdf06ac31ce61d88a87c1e662 -->
<!-- ○ 지도의 중심 좌표 -->
<!-- 37.5566126,126.9196347 -->
<div>
<h1>Kakao Map 중심 좌표 이동</h1>
<ul>
<li>지도 객체의 메소드를 통해 지도를 원하는 좌표로 이동시킬 수 있다.</li>
<li>표시되고 있는 영역을 벗어나지 않는 거리 내에서
애니메이션 효과처럼 지도를 부드럽게 이동시킬 수도 있다.</li>
</ul>
<hr>
</div>
<!-- 지도 그려질 공간 -->
<div id="map" style="width: 100%; height: 350px;"></div>
<p>
<button type="button" onclick="setCenter()">중심 좌표 이동</button>
<!-- <button type="button" onclick="panTo()">중심 좌표 다시 이동</button> -->
<button type="button" onclick="panTo()">중심 좌표 스벅으로 부드럽게 이동</button>
<button type="button" onclick="panTo2()">중심 좌표 순두부로 부드럽게 이동</button>
<button type="button" onclick="panTo3()">중심 좌표 국회의사당으로 부드럽게 이동</button>
</p>
</body>
</html>실행결과 스크린샷
01234567
WebContent
MapTest05.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest05.html</title>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=f14679fbdf06ac31ce61d88a87c1e662"></script>
<script type="text/javascript">
function initialize()
{
container = document.getElementById("map");
options =
{
center: new kakao.maps.LatLng(37.5565334,126.9195265), // 풍성빌딩
lever: 3, // 지도 확대축소 레벨
};
map = new kakao.maps.Map(container, options);
// 지도 레벨 표시 함수 호출
displayLevel();
}
// 지도 레벨 표시 함수 정의
function displayLevel()
{
var levelEl = document.getElementById("mapLevel");
levelEl.innerHTML = "현재 지도 레벨은 " + map.getLevel() + " 레벨 입니다.";
}
// ※ 지도의 레벨은 지도의 확대축소 수준을 의미한다.
// 지도의 레벨(1 ~ 14)은 숫자가 작을 수록 지도의 확대 수준이 높다.
// 지도 레벨 -1(낮추기, 확대)
function zoomIn()
{
// 현재의 지도 레벨 얻어오기
var level = map.getLevel();
// 얻어온 지도의 현재 레벨에서 1 내리기(→ 지도 확대)
map.setLevel(level - 1);
// 지도 레벨 표시 함수 호출
displayLevel();
}
// 지도 레벨 +1(높이기, 축소)
function zoomOut()
{
// 현재의 지도 레벨 얻어오기
var level = map.getLevel();
// 얻어온 지도의 현재 레벨에서 1 올리기(→ 지도 축소)
map.setLevel(level + 1);
// 지도 레벨 표시 함수 호출
displayLevel();
}
</script>
</head>
<body onload="initialize()">
<!-- ○ 발급받은 App Key -->
<!-- appKey=f14679fbdf06ac31ce61d88a87c1e662 -->
<!-- ○ 지도의 중심 좌표 -->
<!-- 37.5566126,126.9196347 -->
<div>
<h1>Kakao Map 레벨 전환</h1>
<hr>
</div>
<!-- 지도를 그릴 공간 확보(지정) -->
<div id="map" style="width: 100%; height: 350px;"></div>
<br>
<!-- 지도 레벨 확인(출력) -->
<span id="mapLevel"></span>
<p>
<button type="button" onclick="zoomIn()">지도 레벨 -1(낮추기, 확대)</button>
<button type="button" onclick="zoomOut()">지도 레벨 +1(높이기, 축소)</button>
</p>
</body>
</html>
실행결과 스크린샷
012345678910
WebContent
MapTest06.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest06.html</title>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=f14679fbdf06ac31ce61d88a87c1e662"></script>
<script type="text/javascript">
function initialize()
{
container = document.getElementById("map");
options =
{
center: new kakao.maps.LatLng(37.5565334,126.9195265),
level: 3,
};
map = new kakao.maps.Map(container, options);
// 지도 타입 컨트롤 생성
//-- 일반 지도와 스카이 뷰로 타입 전환
mapTypeControl = new kakao.maps.MapTypeControl();
//--> 지도 위에 레이어를 두는 형식으로 컨트롤을 구성하게 되는데
// 이러한 추가적인 컨트롤은 맵 위에 구성하겠다는 설정을 하지 않으면
// 시각적으로 확인이 불가능하다.
// 지도 타입 컨트롤을 지도 위에 올리기(즉, 지도에 표시)
//map.addControl(mapTypeControl);
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
// 우측 상단에 지도 타입 컨트롤이 위치하도록 설정한 것이다.
// 이전에 Positon 을 지정하지 않았을 때와 동일한 것으로 미루어 보아
// default 값임을 알 수 있다.
}
function getInfo()
{
// 지도의 현재 중심 좌표 얻어오기
var center = map.getCenter();
// 지도의 현재 레벨 얻어오기
var level = map.getLevel();
// 지도의 타입 얻어오기
var mapType = map.getMapTypeId();
// 지도의 현재 영역 얻어오기
var bounds = map.getBounds();
// 얻어낸 현재 영역의 남서쪽 좌표 얻어오기
var swLatLng = bounds.getSouthWest();
// 얻어낸 현재 영역의 북동쪽 좌표 얻어오기
var neLatLng = bounds.getNorthEast();
var message = "지도의 중심 좌표는 " + center + " 입니다.<br>";
message += "위도는 " + center.getLat();
message += ", 경도는 " + center.getLng() + " 인거죠~<br>";
message += "지도 레벨은 " + level + " 이며, ";
message += "지도 타입은 " + mapType + " 입니다.<br>";
message += "지도의 현재 영역은 " + bounds + " 입니다.<br>";
message += "지도의 남서쪽 좌표는 " + swLatLng.getLat();
message += ", " + swLatLng.getLng() + " 이고, <br>";
message += "지도의 북동쪽 좌표는 " + neLatLng.getLat();
message += ", " + neLatLng.getLng() + " 인거죠~<br>";
var typeEl = document.getElementById("mapType");
typeEl.innerHTML = message;
}
</script>
</head>
<body onload="initialize()">
<!-- ○ 발급받은 App Key -->
<!-- appKey=f14679fbdf06ac31ce61d88a87c1e662 -->
<!-- ○ 지도의 중심 좌표 -->
<!-- 37.5566126,126.9196347 -->
<div>
<h1>Kakao Map 지도 정보 얻어내기</h1>
<hr>
</div>
<!-- 지도를 그릴 공간 확보(지정) -->
<div id="map" style="width: 100%; height: 350px;"></div>
<br>
<p>
<button type="button" onclick="getInfo()">지도 정보 확인</button>
<br>
<br>
<span id="mapType"></span>
</p>
</body>
</html>
'[API]' 카테고리의 다른 글
| ★ [KakaoMapStudy] 20240214 [프로그램 소스] (0) | 2024.02.14 |
|---|---|
| ★[KakaoMapStudy] 20240213 [프로그램 소스] (0) | 2024.02.13 |
'[API]' Related Articles
more
