Kakaopmap API 샘플 코드를 보고 활용 연습을 해보겠음
직접 해보면서 나한테 맞춰서 약간의 코드 수정했음
카카오 개발 홈페이지에서 보여주는 예제 샘플을 참고하지만,
그대로 사용 안 하고 내 맘대로 하겠음
카카오 예제실습에 나와있는 코드만 사용하는게 아니라
제멋대로 살짝 추가하는 부분도 있으니 봐주시고
만약 수정할 부분이 있거나 그러면 알려주세요 ~
참고로 저 코딩 못해여~~ 복붙이지만 열정으로 독학중이에여 !!!!!
Contents
1. 기본지도로드
지도 API 활용 - 2D 지도(기본지도로드)
vworld 자료실의 교육자료를 참고하여 지도API활용하여 웹페이지에 지도를 로드해보고 구문 해석도 나름 할수 있을만큼... 해보겠음. 여기서 보여지는 APIkey는 봉삼네가 발급받은거니 무단으로 사
rrbong.site
2. 지도활용 Kakaopmap
2.1. 지도 이동 · 레벨 바꾸기
2.2. 지도 웹페이지에 중심좌표 및 컨트롤 정보 나타내기
2.3. 지도 컨트롤 올리기 (기본 컨트롤, 사용자 컨트롤 올리기)
2.4. 지도 잠금
.....
2.2. 지도 웹페이지에 중심좌표 및 컨트롤 정보 나타내기
Kakao Developers . Kakao Maps API 기본 코드
직접 해보기
Kakao Developers.Kakao Maps API - Sample - 지도 정보 얻어오기
카카오 예제를 보면 해당 정보는 개발자모드에서 확인되게 코딩되어있지만......
답답해죽게!!
그래서 이동할때마다 웹페이지에 중심좌표의 정보와 레벨값, 지도타입이 보이게 수정해보았음
" Bongbongsam " Kakao Maps API 실행결과 바로 보기
glass의 Kakaomap 2.2. 지도 정보 얻어오기
bongbongsam.github.io
지도정보 얻는 함수
<script>
function getInfo() {
var center = map.getCenter(); //현재중심좌표정보
var level = map.getLevel(); //현재레벨정보
var mapTypeId = map.getMapTypeId(); //지도타입정보
/*var bounds = map.getBounds(); //지도현재영역
var swLatLng = bounds.getSouthWest(); // 지도 위도정보
var neLatLng = bounds.getNorthEast(); //지도 경도정보
var boundsStr = bounds.toString(); //영역 문자열정보 ((남,서), (북,동)) 형식*/
var element = document.getElementById('message');
element.innerHTML = '지도 중심좌표는 위도 ' + center.getLat() + ',경도 ' + center.getLng() + ' 이고 <br> '
+'지도 레벨은 '+ level + ' 입니다 <br>지도 타입은 ' + mapTypeId + ' 입니다. <br>';
}
</script>element.innerHTML을 사용하여 검색된 정보
<script>
function getInfo() {
var element = document.getElementById('message');
element.innerHTML = '지도 중심좌표는 위도 ' + center.getLat() + ',경도 ' + center.getLng() + ' 이고 <br> '
+'지도 레벨은 '+ level + ' 입니다 <br>지도 타입은 ' + mapTypeId + ' 입니다. <br>';
}
</script>위 정보를 "message" span 요소의 내용을 업데이트
<body>
<p><span id = "message"></span></p>
</body>
<script>
getInfo();
kakao.maps.event.addListener(map, 'dragend', getInfo);
kakao.maps.event.addListener(map, 'zoom_changed', getInfo);
kakao.maps.event.addListener(map, 'maptypeid_changed', getInfo);
</script>Events 종류
1) dragstart - 드래그를 시작할 때 발생
kakao.maps.event.addListener(map, 'dragstart', function() { /* do something*/ });
2) drag - 드래그를 하는 동안 발생
kakao.maps.event.addListener(map, 'drag', function() { /* do something*/ });
3) dragend - 드래그가 끝날 때 발생
kakao.maps.event.addListener(map, 'dragend', function() { /* do something*/ });
4) idle - 중심 좌표나 확대 수준이 변경되면 발생( 단, 애니메이션 도중에는 발생 안 함
kakao.maps.event.addListener(map, 'idle', function() { /* do something*/ });
5) tilesloaded - 확대 수준이 변경되거나 지도가 이동했을 때 타일 이미지 로드가 모두 완료되면 발생
(지도이동이 미세하기 일어나 타일 이미지 로드가 일어나지 않은 경우 발생 안 함)
kakao.maps.event.addListener(map, 'tilesloaded', function() { /* do something*/ });
6) maptypeid_changed - 지도 기본 타일(일반지도, 스카이뷰, 하이브리드)이 변경되면 발생
kakao.maps.event.addListener(map, 'maptypeid_changed', function() { /* do something*/ });
7) center_changed - 중심 좌표가 변경되면 발생
kakao.maps.event.addListener(map, 'center_changed', function() { alert('center changed!'); });
8) zoom_start - 확대 수준이 변경되기 직전 발생
kakao.maps.event.addListener(map, 'zoom_start', function() { alert('Map is going to zoom!'); });
9) zoom_changed - 확대 수준이 변경되면 발생
kakao.maps.event.addListener(map, 'zoom_changed', function() { alert('zoom changed!'); });
10) bounds_changed - 지도 영역이 변경되면 발생
kakao.maps.event.addListener(map, 'bounds_changed', function() { alert('bounds changed!'); });
11) click -지도를 클릭하면 발생 MouseEvent
kakao.maps.event.addListener(map, 'click', function(mouseEvent) {
var latlng = mouseEvent.latLng;
alert('click! ' + latlng.toString()); });
12) dblclick -지도를 더블클릭하면 발생 MouseEvent
kakao.maps.event.addListener(map, 'dblclick', function(mouseEvent) {
var latlng = mouseEvent.latLng;
alert('double click! ' + latlng.toString());});
13) rightclick -지도를 마우스 오른쪽 버튼으로 클릭하면 발생 MouseEvent
kakao.maps.event.addListener(map, 'rightclick', function(mouseEvent) {
var latlng = mouseEvent.latLng;
alert('right click! ' + latlng.toString()); });
14) mousemove -지도에서 마우스 커서를 이동하면 발생 MouseEvent
kakao.maps.event.addListener(map, 'mousemove', function(mouseEvent) { /* do something*/ });
다음시간에는 2.3. 지도 컨트롤 올리기 (기본 컨트롤, 사용자 컨트롤 올리기) 를 해볼거 ~~
여기서 !! 지도타입이 출력되는 걸 숫자가 아닌 지도이름이 출력되도록.. 해볼거임 ^-^
'Wep Map > Kakao 지도 API' 카테고리의 다른 글
| 지도 API 활용 - Kakaomap 활용 [지도 잠금] (0) | 2023.05.23 |
|---|---|
| 지도 API 활용 - Kakaomap 활용 [기본 컨트롤, 사용자 컨트롤 올리기] (0) | 2023.05.23 |
| 지도 API 활용 - Kakaomap 활용 [지도이동·확대·축소] (0) | 2023.05.22 |
| 지도 API 활용 - 지도활용(작성중) (0) | 2023.05.18 |
| 지도 API 활용 - 2D 지도(기본지도로드) (0) | 2023.05.17 |
