본문 바로가기
공부/naver map api

[naver map api] 리모콘 생성(버튼, 텍스트박스, 이미지 올리기)

by 고기 2022. 1. 27.

이전 글에서 naver map api 위에 레이어를 그리는 방법에 대해 알아보았다. 이번 글에서는 주소를 검색하는 방법에 대해 작성하려고 했는데 우선 버튼을 만드는 것부터 해야하니까 이번에는 버튼과 텍스트박스 등을 만드는 방법과 버튼 이벤트를 작성하는 방법에 대해 알아본다.

 

먼저 index.html를 다시 작성한다. body부분에 naver map을 설정하고 그 아래 리모콘 영역을 그릴 menu_wrap을 만든다.

<div class="map_wrap">
    <div id="map" style="width:100%;height:100vh;position:relative;overflow:hidden;"></div>
    <div id="menu_wrap" class="bg_white"></div>
</div>

 

리모콘 영역 상단에 이미지를 삽입하고, 모달 창을 생성할 버튼을 만든다.

<div id="menu_wrap" class="bg_white">
    <hr>
    <div class="profile">
        <img src="./test.png" width="180px" height="50px" alt="광산구청 이미지^^">
        <input type="button" class="infobtn" value="요구사항" id="info">
    </div>
    <hr>            
</div>

 

리모콘 영역 중단에 주소 검색 버튼과 주소 텍스트박스를 만든다. 추가로 주소가 맞는지 틀린지 출력하기 위해 알림 텍스트 영역도 만들었다. 

<div id="menu_wrap" class="bg_white">
    <hr>
    <div class="profile"> ... </div>
    <hr>
    <div class="option">
        <h3>주소를 검색하세요!</h3>
        <!-- 검색창 -->
        <input type="text" class="searchtxt" value="광산구 송정2동" id="searchAddress" size="22">
        <!-- 버튼 -->
        <input type="button" class="searchbtn" value="검색" id="searchBtn" />
        <div class="alertAddress"></div>
    </div>
    <hr>    
</div>

 

리모콘 하단 영역에는 초기화 버튼과 각 행정동 별 이동 버튼을 만들었다.

<div id="menu_wrap" class="bg_white">
    <hr>
    <div class="profile"> ... </div>
    <hr>
    <div class="option"> ... </div>
    <hr>
    <div class="gwd">
        <div class="buttoninfo">
            행정동 이동 버튼
        </div>
        <div class="resetbtn">
            <input type="button" class="reset" id="re" , value="초기화" >
        </div>
        <div class="movebtn">
            <input type="button" class="move", id="et" , value="도산동" >
            <input type="button" class="move", id="er" , value="동곡동" >
            <input type="button" class="move", id="qf" , value="본량동" >
            <input type="button" class="move", id="qd" , value="비아동" >
            <input type="button" class="move", id="te" , value="삼도동" >
            <input type="button" class="move", id="tw1", value="송정1동">
            <input type="button" class="move", id="tw2", value="송정2동">
            <input type="button" class="move", id="td" , value="수완동" >
            <input type="button" class="move", id="tr" , value="신가동" >
            <input type="button" class="move", id="tc" , value="신창동" >
            <input type="button" class="move", id="tg" , value="신흥동" >
            <input type="button" class="move", id="df" , value="어룡동" >
            <input type="button" class="move", id="dt" , value="우산동" >
            <input type="button" class="move", id="ds" , value="운남동" >
            <input type="button" class="move", id="dr1", value="월곡1동">
            <input type="button" class="move", id="dr2", value="월곡2동">
            <input type="button" class="move", id="dr" , value="임곡동" >
            <input type="button" class="move", id="ce1", value="첨단1동">
            <input type="button" class="move", id="ce2", value="첨단2동">
            <input type="button" class="move", id="ve" , value="평동"   >
            <input type="button" class="move", id="gs" , value="하남동" >
        </div>
        <hr>
    </div>
</div>

 

버튼을 클릭하면 생성될 모달 창 영역을 만들었다.

<div id="menu_wrap" class="bg_white">
    <hr>
    <div class="profile"> ... </div>
    <hr>
    <div class="option"> ... </div>
    <hr>
    <div class="gwd"> ... </div>
</div>

<div class="black_bg"></div>
<div class="modal_wrap">
    <div class="modal_close"><a href="#">close</a></div>
    <div>
        <img src="test.png" width=500px; height="200px";>
        내용입력 ^^
    </div>
<div>

 

naver map 설정과 사용할 변수들과 함수들을 작성해둔 javascript file을 등록한다.

<body>
    <div id="menu_wrap" class="bg_white">
        <hr>
        <div class="profile"> ... </div>
        <hr>
        <div class="option"> ... </div>
        <hr>
        <div class="gwd"> ... </div>
    </div>

    <div class="black_bg"></div>
    <div class="modal_wrap"> ... <div>

    <script>
        let mapOptions = {
            center: new naver.maps.LatLng(35.1613371, 126.7617628),
            zoom: 13,

            zoomControl: true, // 줌
            zoomControlOptions: {
                style: naver.maps.ZoomControlStyle.LARGE,
                position: naver.maps.Position.TOP_RIGHT
            },
            mapTypeControl: true, // 일반 | 위성
            mapTypeControlOptions: {
                style: naver.maps.MapTypeControlStyle.BUTTON,
                position: naver.maps.Position.TOP_RIGHT
            },
            scaleControl: true, // 지도 축척
            scaleControlOptions: {
                position: naver.maps.Position.BOTTOM_RIGHT
            },
            logoControl: true, // Naver 로고
            logoControlOptions: {
                position: naver.maps.Position.BOTTOM_RIGHT
            },
            mapDataControl: true, // 지도 데이터 저작권
            mapDataControlOptions: {
                position: naver.maps.Position.BOTTOM_LEFT
            }
        };
        let map = new naver.maps.Map(document.getElementById('map'), mapOptions);        
    </script>
    <script src="variable.js"></script>
    <script src="function.js"></script>    
</body>

 

수정한 index.html의 전체 내용은 다음과 같다. head 부분의 css는 자유롭게 설정해주면 된다. turf.js는 폴리곤 내부 영역을 찾기 위한 js file이다.

<!DOCTYPE html>
<html>

<head>        
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>광산구 통지도 검색 시스템</title>    
    <style>
        body{width:100%; height:100%; margin:0;}
        .map_wrap, .map_wrap * {margin:0;padding:0;font-family:'Malgun Gothic'; font-size:12px;}
        .map_wrap a, .map_wrap a:hover, .map_wrap a:active{color:#000;text-decoration: none;}
        .map_wrap {position:relative;width:100%;height:500px;}
        #menu_wrap {position:absolute;top:0;left:0;bottom:0;width:250px;margin:10px 0 30px 10px;padding:5px;overflow-y:auto;background:rgba(255, 255, 255, 0.7);z-index: 1;font-size:12px;border-radius: 10px;}
        .bg_white {background:#fff;}
        #menu_wrap hr {display: block; height: 1px;border: 0; border-top: 3px solid #5F5F5F;margin:3px 0;}
        #menu_wrap .profile{ font-family: "Malgun Gothic"; font-weight: bold; margin-top: 10px; margin-bottom: 10px;}
        
        .modal_wrap{ display: none; width: 500px; height: 500px; position: absolute; top:50%; left: 50%; margin: -250px 0 0 -250px; background:#eee; z-index: 2; }
        .black_bg{ display: none; position: absolute; content: ""; width: 100%; height: 100%; background-color:rgba(0, 0,0, 0.5); top:0; left: 0; z-index: 1; }
        .modal_close{  width: 26px; height: 26px; position: absolute; top: -30px; right: 0; }
        .modal_close> a{ display: block; width: 100%; height: 100%; background:url(https://img.icons8.com/metro/26/000000/close-window.png); text-indent: -9999px; }

        #menu_wrap .option{text-align: left; font-size:15px; margin-top:10px; margin-bottom:15px; margin-left:15px; height: 70px;}
        #menu_wrap .option .searchtxt {margin:10px 0;}
        #menu_wrap .option .searchbtn {margin-left:5px; }
        #menu_wrap .option .alertAddress { font-family: "Malgun Gothic"; font-weight: bold; font-size:13px; color:red;}        

        #menu_wrap .gwd { float: top; height: 250px; margin-top: 10px; margin-bottom: 10px; margin-left: 15px;}   
        #menu_wrap .gwd .buttoninfo{ font-family:'Malgun Gothic'; font-weight: bolder; font-size:12px; }
        #menu_wrap .gwd .resetbtn{ float: top; margin-top: 5px; padding: 2px; height: 25px; }
        #menu_wrap .gwd .reset { position:relative; width: 70px; height: 25px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); font-family: 'Malgun Gothic'; font-weight: bolder; background-color:lightblue; border:0; outline: 0;}
        #menu_wrap .gwd .movebtn{ float:top; margin-bottom: 10px; padding: 2px; }
        #menu_wrap .gwd .move{ position:relative;  width: 70px; height: 25px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); font-family: 'Malgun Gothic'; font-weight: bolder; background-color:lightblue; border:0; outline: 0;}

        #menu_wrap .gwd .tongbtn { width: 70px; height: 25px; }

    </style>
    <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script type="text/javascript"
        src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=ClientID&submodules=geocoder"></script>
</head>

<body>    
    <div class="map_wrap">
        <div id="map" style="width:100%;height:100vh;position:relative;overflow:hidden;"></div>

        <div id="menu_wrap" class="bg_white">
            <hr>
            <div class="profile">
                <img src="./test.png" width="180px" height="50px" alt="광산구청 이미지^^">
                <input type="button" class="infobtn" value="요구사항" id="info">
            </div>
            <hr>
            <div class="option">
                <h3>주소를 검색하세요!</h3>
                <!-- 검색창 -->
                <input type="text" class="searchtxt" value="광산구 송정2동" id="searchAddress" size="22">
                <!-- 버튼 -->
                <input type="button" class="searchbtn" value="검색" id="searchBtn" />
                <div class="alertAddress"></div>
            </div>
            <hr>
            <div class="gwd">
                <div class="buttoninfo">
                    행정동 이동 버튼
                </div>
                <div class="resetbtn">
                    <input type="button" class="reset" id="re" , value="초기화" >
                </div>
                <div class="movebtn">
                    <input type="button" class="move", id="et" , value="도산동" >
                    <input type="button" class="move", id="er" , value="동곡동" >
                    <input type="button" class="move", id="qf" , value="본량동" >
                    <input type="button" class="move", id="qd" , value="비아동" >
                    <input type="button" class="move", id="te" , value="삼도동" >
                    <input type="button" class="move", id="tw1", value="송정1동">
                    <input type="button" class="move", id="tw2", value="송정2동">
                    <input type="button" class="move", id="td" , value="수완동" >
                    <input type="button" class="move", id="tr" , value="신가동" >
                    <input type="button" class="move", id="tc" , value="신창동" >
                    <input type="button" class="move", id="tg" , value="신흥동" >
                    <input type="button" class="move", id="df" , value="어룡동" >
                    <input type="button" class="move", id="dt" , value="우산동" >
                    <input type="button" class="move", id="ds" , value="운남동" >
                    <input type="button" class="move", id="dr1", value="월곡1동">
                    <input type="button" class="move", id="dr2", value="월곡2동">
                    <input type="button" class="move", id="dr" , value="임곡동" >
                    <input type="button" class="move", id="ce1", value="첨단1동">
                    <input type="button" class="move", id="ce2", value="첨단2동">
                    <input type="button" class="move", id="ve" , value="평동"   >
                    <input type="button" class="move", id="gs" , value="하남동" >
                </div>
                <hr>
            </div>
        </div>
    </div>
       
    <div class="black_bg"></div>
    <div class="modal_wrap">
        <div class="modal_close"><a href="#">close</a></div>
        <div>
            <img src="test.png" width=500px; height="200px";>
            내용입력 ^^
        </div>
    <div>
          
    <script>
        let mapOptions = {
            center: new naver.maps.LatLng(35.1613371, 126.7617628),
            zoom: 13,

            zoomControl: true, // 줌
            zoomControlOptions: {
                style: naver.maps.ZoomControlStyle.LARGE,
                position: naver.maps.Position.TOP_RIGHT
            },
            mapTypeControl: true, // 일반 | 위성
            mapTypeControlOptions: {
                style: naver.maps.MapTypeControlStyle.BUTTON,
                position: naver.maps.Position.TOP_RIGHT
            },
            scaleControl: true, // 지도 축척
            scaleControlOptions: {
                position: naver.maps.Position.BOTTOM_RIGHT
            },
            logoControl: true, // Naver 로고
            logoControlOptions: {
                position: naver.maps.Position.BOTTOM_RIGHT
            },
            mapDataControl: true, // 지도 데이터 저작권
            mapDataControlOptions: {
                position: naver.maps.Position.BOTTOM_LEFT
            }
        };
        let map = new naver.maps.Map(document.getElementById('map'), mapOptions);        
    </script>
    <script src="variable.js"></script>
    <script src="function.js"></script>    
</body>

</html>

 

웹페이지는 다음과 같이 실행된다. 왼쪽 상단에 리모콘을 생성해서 그 위에 이미지와 버튼 텍스트박스를 올렸다. 

사진1

여기까지 이미지, 버튼, 텍스트박스 등을 만드는 법에 대해 알아보았다. 다음 글에서는 버튼을 클릭했을 때 발생할 이벤트 함수를 작성한다.

저작자표시

'공부 > naver map api' 카테고리의 다른 글

[naver map api] 주소검색 기능 구현  (0) 2022.01.27
[naver map api] 버튼 이벤트, 모달창 생성  (0) 2022.01.27
[naver map api] naver map 위에 레이어 그리고 마우스 리스너 설정하기  (0) 2022.01.26
[naver map api] naver map 그리기  (0) 2022.01.26
[naver map api] naver cloud platform 등록과정 정리  (0) 2022.01.26

관련글

댓글

티스토리툴바