본문 바로가기
Wep Map/Kakao 지도 API

지도 API 활용 - Kakaomap 활용 [기본 컨트롤, 사용자 컨트롤 올리기]

by 유봉삼 2023. 5. 23.
728x90
반응형

Kakaopmap API 샘플 코드를 보고 활용 연습을 해보겠음 

직접 해보면서 나한테 맞춰서 약간의 코드 수정했음

카카오 개발 홈페이지에서 보여주는 예제 샘플을 참고하지만, 

그대로 사용 안 하고 내 맘대로 하겠음

 

카카오 예제실습에 나와있는 코드만 사용하는게 아니라

제멋대로 살짝 추가하는 부분도 있으니 봐주시고

만약 수정할 부분이 있거나 그러면 알려주세요 ~ 

참고로 저 코딩 못해여~~  복붙이지만 열정으로 독학중이에여 !!!!!

 

 

Contents

1. 기본지도로드      

           1.1. 2D지도생성
           1.2. 2D지도마커추가

 

지도 API 활용 - 2D 지도(기본지도로드)

vworld 자료실의 교육자료를 참고하여 지도API활용하여 웹페이지에 지도를 로드해보고 구문 해석도 나름 할수 있을만큼... 해보겠음. 여기서 보여지는 APIkey는 봉삼네가 발급받은거니 무단으로 사

rrbong.site

2. 지도활용 Kakaopmap

            2.1. 지도 이동 · 레벨 바꾸기
            2.2. 지도 웹페이지에 중심좌표 및 컨트롤 정보 나타내기
            2.3. 지도 컨트롤 올리기 (기본컨트롤, 사용자컨트롤)

 

.....

 

 

 

 

 

 

2.3  지도 컨트롤 올리기

 

2.3  지도 컨트롤 올리기는 2.2 지도 정보 얻어오기 코드에 추가해 보겠다. 

지도 컨트롤은 아래와 같은 종류가 있다. 

좌측 1. 기본컨트롤 , 우측 2. 사용자컨트롤

나는 개인적으로 1번의 컨트롤이 더 맘에 들지만(_코드가 짧아서 좋음) 
지금은 해보는 단계이니 두 개 다 해보겠음.

 

Kakao Developers . Kakao Maps API 기본 코드 

직접 해보기

Kakao Developers.Kakao Maps API - Sample - 지도에 컨트롤 올리기 

Kakao Developers.Kakao Maps API - Sample -지도에 사용자 컨트롤 올리기

 

 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>glass의 Kakaomap 2.2. 지도 정보 얻어오기</title>
    <style>
        html, body {width:100%;height:100%;margin:0;padding:0;}
        .map_wrap {position:relative;overflow:hidden;width:100%;height:600px;}
        .radius_border{border:1px solid #919191;border-radius:5px;}    
        .custom_typecontrol {position:absolute;top:10px;right:10px;overflow:hidden;
                            width:195px;height:30px;margin:0;padding:0;z-index:1;font-size:12px;font-family:'Malgun Gothic', '맑은 고딕', sans-serif;}
        .custom_typecontrol span {display:block;width:65px;height:30px;float:left;text-align:center;line-height:30px;cursor:pointer;}
        .custom_typecontrol .btn {background:#fff;background:linear-gradient(#fff,  #e6e6e6);}      
        .custom_typecontrol .btn:hover {background:#f5f5f5;background:linear-gradient(#f5f5f5,#e3e3e3);}
        .custom_typecontrol .btn:active {background:#e6e6e6;background:linear-gradient(#e6e6e6, #fff);}    
        .custom_typecontrol .selected_btn {color:#fff;background:#a32b87;background:linear-gradient(#48143c, #a32b87);}
        .custom_typecontrol .selected_btn:hover {color:#fff;}  
        .custom_zoomcontrol {position:absolute;top:70px;right:10px;width:36px;height:80px;overflow:hidden;z-index:1;background-color:#f5f5f5;}
        .custom_zoomcontrol span {display:block;width:36px;height:40px;text-align:center;cursor:pointer;}    
        .custom_zoomcontrol span img {width:15px;height:15px;padding:12px 0;border:none;}            
        .custom_zoomcontrol span:first-child{border-bottom:1px solid #bfbfbf;}            
    </style>
</head>
<body>

<div class="map_wrap">
    <div id="map" style="width:100% ;height:100%;"></div>

    <!-- 지도타입 컨트롤 div 입니다 -->
    <div class="custom_typecontrol radius_border">
        <span id="btnRoadmap" class="selected_btn" onclick="setMapType('roadmap')">지도</span>
        <span id="btnSkyview" class="btn" onclick="setMapType('skyview')">스카이뷰</span>
        <span id="btnHybrid" class="btn" onclick="setMapType('hybrid')">하이브리드</span>
    </div>

    <!-- 지도 확대, 축소 컨트롤 div 입니다 -->
    <div class="custom_zoomcontrol radius_border">
        <span onclick="zoomIn()"><img src="https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/ico_plus.png" alt="확대"></span>  
        <span onclick="zoomOut()"><img src="https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/ico_minus.png" alt="축소"></span>
    </div>
</div>
<p><span id = "message"></span></p>


<script>
var options = {
        center: new kakao.maps.LatLng(37.667503, 127.044575), //기본지도로드 중심좌표:방학역
       level: 5
    };    
var map = new kakao.maps.Map(document.getElementById('map'), options);

//지도타입 기본컨트롤을 생성
var mapTypeControl = new kakao.maps.MapTypeControl();
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPLEFT);
//줌 기본컨트롤을 생성
var zoomControl = new kakao.maps.ZoomControl();
map.addControl(zoomControl, kakao.maps.ControlPosition.LEFT);


getInfo();
kakao.maps.event.addListener(map, 'dragend', getInfo);
kakao.maps.event.addListener(map,  'zoom_changed', getInfo);
kakao.maps.event.addListener(map, 'maptypeid_changed', getInfo);

// 지도타입 컨트롤의 지도 또는 스카이뷰 버튼을 클릭하면 호출되어 지도타입을 바꾸는 함수입니다
function setMapType(maptype) {
    var roadmapControl = document.getElementById('btnRoadmap');
    var skyviewControl = document.getElementById('btnSkyview');
    var hybridControl = document.getElementById('btnHybrid');

    roadmapControl.className = 'btn';
    skyviewControl.className = 'btn';
    hybridControl.className = 'btn';

    if (maptype === 'roadmap') {
        map.setMapTypeId(kakao.maps.MapTypeId.ROADMAP);
        roadmapControl.className = 'selected_btn';

    } else if (maptype === 'skyview') {
        map.setMapTypeId(kakao.maps.MapTypeId.SKYVIEW);
        skyviewControl.className = 'selected_btn';
    } else if (maptype === 'hybrid') {
        map.setMapTypeId(kakao.maps.MapTypeId.HYBRID);
        hybridControl.className = 'selected_btn';
    }
    getInfo();
}

function zoomIn() { // 지도 확대, 축소 컨트롤에서 확대 버튼을 누르면 호출되어 지도를 확대하는 함수입니다
    map.setLevel(map.getLevel() - 1);
    getInfo();}

function zoomOut() { // 지도 확대, 축소 컨트롤에서 축소 버튼을 누르면 호출되어 지도를 확대하는 함수입니다
    map.setLevel(map.getLevel() + 1);
    getInfo();}

   
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(); //영역 문자열정보 ((남,서), (북,동)) 형식*/

    if (mapTypeId=='1'){mapTypeId='기본지도'}
    else if (mapTypeId=='2'){mapTypeId='스카이뷰'}
    else if (mapTypeId=='3'){mapTypeId='하이브리드'}


    var element = document.getElementById('message');
    element.innerHTML = '지도 중심좌표는 위도 ' + center.getLat() + ',경도 ' + center.getLng() + ' 이고 <br> '
                        +'지도 레벨은 '+ level + ' 입니다 <br>지도 타입은 ' + mapTypeId + ' 입니다. <br>';

    }


</script>
</body>
</html>

 

 

( 1 ) Control

 

1) MapTypeControl

2.2에서 지도타입의 컨트롤을 생성하는 코드는 아래와 같았다.  이는 1번 기본 컨트롤 생성 코드

<script>
var mapTypeControl = new kakao.maps.MapTypeControl(); //지도타입 컨트롤을 생성
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT); // 지도 타입 컨트롤을 오른쪽 상단에 표시
</script>

 
줌컨트롤 생성코드는 아래와 같음

2)  ZoomControl

<script>
var zoomControl = new kakao.maps.ZoomControl();  
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
</script>

 
 

( 2 ) Custom Control

컨트롤코드를 작성할 때  Style 코드를 만들어 줘야 함..

1) Custom Style 코드 생성
<head>  
<style>
	html, body {width:100%;height:100%;margin:0;padding:0;} 
        .map_wrap {position:relative;overflow:hidden;width:100%;height:600px;}
        .radius_border{border:1px solid #919191;border-radius:5px;}     
        .custom_typecontrol {position:absolute;top:10px;right:10px;overflow:hidden;
                            width:195px;height:30px;margin:0;padding:0;z-index:1;font-size:12px;font-family:'Malgun Gothic', '맑은 고딕', sans-serif;}
        .custom_typecontrol span {display:block;width:65px;height:30px;float:left;text-align:center;line-height:30px;cursor:pointer;}
        .custom_typecontrol .btn {background:#fff;background:linear-gradient(#fff,  #e6e6e6);}       
        .custom_typecontrol .btn:hover {background:#f5f5f5;background:linear-gradient(#f5f5f5,#e3e3e3);}
        .custom_typecontrol .btn:active {background:#e6e6e6;background:linear-gradient(#e6e6e6, #fff);}    
        .custom_typecontrol .selected_btn {color:#fff;background:#a32b87;background:linear-gradient(#48143c, #a32b87);}
        .custom_typecontrol .selected_btn:hover {color:#fff;}  

        .custom_zoomcontrol {position:absolute;top:70px;right:10px;width:36px;height:80px;overflow:hidden;z-index:1;background-color:#f5f5f5;} 
        .custom_zoomcontrol span {display:block;width:36px;height:40px;text-align:center;cursor:pointer;}     
        .custom_zoomcontrol span img {width:15px;height:15px;padding:12px 0;border:none;}             
        .custom_zoomcontrol span:first-child{border-bottom:1px solid #bfbfbf;}            
              
</style>
</head>
.custom_typecontrol {position:absolute;top:10px;right:10px;overflow:hidden;
 width:195px;height:30px;margin:0;padding:0;z-index:1;font-size:12px;font-family:'Malgun Gothic', '맑은 고딕', sans-serif;}

위설정에서 버튼 한 개당 65px 나는 버튼을 3개 만들 거임.

2) Control Botton Div

지도를 표시하는 영역에 컨트롤버튼을 추가해야 함 

<div class="map_wrap">
    <div id="map" style="width:100% ;height:600px;"></div> 
    
    <!-- 지도타입 컨트롤 div 입니다 -->
    <div class="custom_typecontrol radius_border">        
    	<span id="btnRoadmap" class="selected_btn" onclick="setMapType('roadmap')">지도</span>
        <span id="btnSkyview" class="btn" onclick="setMapType('skyview')">스카이뷰</span>
        <span id="btnHybrid" class="btn" onclick="setMapType('hybrid')">하이브리드</span>
    </div>
    <!-- 지도 확대, 축소 컨트롤 div 입니다 -->
    <div class="custom_zoomcontrol radius_border"> 
        <span onclick="zoomIn()"><img src="https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/ico_plus.png" alt="확대"></span>  
        <span onclick="zoomOut()"><img src="https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/ico_minus.png" alt="축소"></span>
    </div>
</div>

<p><span id = "message"></span></p> 
//지도표시영역의 밖이니깐 <div class="map_wrap">밖에 쓰기

지도를 로드할 때 컨트롤의 타입이 나타날 수 있는 함수를 넣어야 함.

<script>
// 지도타입 컨트롤의 지도 또는 스카이뷰 버튼을 클릭하면 호출되어 지도타입을 바꾸는 함수입니다
function setMapType(maptype) { 
    var roadmapControl = document.getElementById('btnRoadmap');
    var skyviewControl = document.getElementById('btnSkyview'); 
    var hybridControl = document.getElementById('btnHybrid'); 

    roadmapControl.className = 'btn';
    skyviewControl.className = 'btn';
    hybridControl.className = 'btn';

    if (maptype === 'roadmap') {
        map.setMapTypeId(kakao.maps.MapTypeId.ROADMAP);
        roadmapControl.className = 'selected_btn';

    } else if (maptype === 'skyview') {
        map.setMapTypeId(kakao.maps.MapTypeId.SKYVIEW); 
        skyviewControl.className = 'selected_btn';
    } else if (maptype === 'hybrid') {
        map.setMapTypeId(kakao.maps.MapTypeId.HYBRID);
        hybridControl.className = 'selected_btn';
    }
    getInfo();
}
</script>

나는 여기서 나만의 컨트롤 색상을 적용해서  이쁜 핑쿠핑쿠컨트롤로 하겠음

이전시간 지도타입이 숫자로 나타났었는데 if문을 사용하여 글자로 표현하였다.

    if (mapTypeId=='1'){mapTypeId='기본지도'}
    else if (mapTypeId=='2'){mapTypeId='스카이뷰'}
    else if (mapTypeId=='3'){mapTypeId='하이브리드'}

 

 

 

 

" Bongbongsam " Kakao Maps API 실행결과 바로 보기  

 

glass의 Kakaomap 2.3. 지도 컨트롤

 

bongbongsam.github.io

 

직접해보기

 

 
 

 

 

다음 글 바로가기 

728x90
반응형
저작자표시 비영리 변경금지

'Wep Map > Kakao 지도 API' 카테고리의 다른 글

지도 API 활용 - Kakaomap 활용 [교통정보·로드뷰·지형도OverlayMapTypeId(mapTypeId) ]  (0) 2023.05.24
지도 API 활용 - Kakaomap 활용 [지도 잠금]  (0) 2023.05.23
지도 API 활용 - Kakaomap 활용 [페이지에 중심좌표 및 정보 나타내기]  (0) 2023.05.23
지도 API 활용 - Kakaomap 활용 [지도이동·확대·축소]  (0) 2023.05.22
지도 API 활용 - 지도활용(작성중)  (0) 2023.05.18

관련글

티스토리툴바