내가 찾던 '그' 방식

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]

Posted by 구차니