내가 찾던 '그' 방식
map을 생성할때 option 객체를 통해 생성하니 더욱 간결해서 좋다.
[링크 : https://navermaps.github.io/maps.js/docs/tutorial-3-control-positioning.example.html]
아래는 버튼을 따로 그리고 절대 좌표로 띄워놓는 방식
<style type="text/css"> #wrap .buttons { position:absolute;top:0;left:0;z-index:1000;padding:5px; } #wrap .buttons .control-btn { margin:0 5px 5px 0; } </style> <div id="wrap" class="section"> <h2>지도 유형 설정하기</h2> <p>지도의 유형을 설정하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다.</p> <div id="map" style="width:100%;height:600px;"> <div class="buttons"> <input id="NORMAL" type="button" value="일반지도" class="control-btn control-on" /> <input id="TERRAIN" type="button" value="지형도" class="control-btn" /> <input id="SATELLITE" type="button" value="위성지도" class="control-btn" /> <input id="HYBRID" type="button" value="겹쳐보기" class="control-btn" /> </div> </div> <code id="snippet" class="snippet"></code> </div> <script id="code"> var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10 }); var btns = $(".buttons > input"); btns.on("click", function(e) { e.preventDefault(); var mapTypeId = this.id; if (map.getMapTypeId() !== naver.maps.MapTypeId[mapTypeId]) { map.setMapTypeId(naver.maps.MapTypeId[mapTypeId]); // 지도 유형 변경하기 btns.removeClass("control-on"); $(this).addClass("control-on"); } }); </script> |
[링크 : https://navermaps.github.io/maps.js/docs/tutorial-3-map-types.example.html]
'프로그램 사용 > 네이버 맵 API' 카테고리의 다른 글
네이버 지도 idle 이벤트 (0) | 2018.10.10 |
---|---|
네이버 지도 API 애니메이션 (0) | 2018.10.05 |
gis 위치정보 db 타입 (0) | 2018.09.11 |
네이버 지도 마커 이벤트 (0) | 2018.09.10 |
네이버 지도 화면상 출력되는 영역 얻기 (0) | 2018.09.10 |