77 lines
3.9 KiB
HTML
77 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>지도 생성하기</title>
|
|
<style>
|
|
html, body {width:100%;height:100%;margin:0;padding:0;}
|
|
.map_wrap {position:relative;overflow:hidden;width:100%;height:100%;}
|
|
.radius_border{border:1px solid #919191;border-radius:5px;}
|
|
.custom_typecontrol {position:absolute;top:10px;right:10px;overflow:hidden;width:130px;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:#425470;background:linear-gradient(#425470, #5b6d8a);}
|
|
.custom_typecontrol .selected_btn:hover {color:#fff;}
|
|
.custom_zoomcontrol {position:absolute;top:50px;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 입니다 -->
|
|
<div class="map_wrap">
|
|
<div id="map" style="width:100%;height:100%;position:relative;overflow:hidden;"></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>
|
|
</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>
|
|
|
|
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=c1ae69a037acc4eebfb9f6b038dd44fd"></script>
|
|
<script>
|
|
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
|
|
mapOption = {
|
|
center: new kakao.maps.LatLng(37.5548599, 126.9681692), // 지도의 중심좌표
|
|
level: 3 // 지도의 확대 레벨
|
|
};
|
|
|
|
// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
|
|
var map = new kakao.maps.Map(mapContainer, mapOption);
|
|
|
|
// 지도타입 컨트롤의 지도 또는 스카이뷰 버튼을 클릭하면 호출되어 지도타입을 바꾸는 함수입니다
|
|
function setMapType(maptype) {
|
|
var roadmapControl = document.getElementById('btnRoadmap');
|
|
var skyviewControl = document.getElementById('btnSkyview');
|
|
if (maptype === 'roadmap') {
|
|
map.setMapTypeId(kakao.maps.MapTypeId.ROADMAP);
|
|
roadmapControl.className = 'selected_btn';
|
|
skyviewControl.className = 'btn';
|
|
} else {
|
|
map.setMapTypeId(kakao.maps.MapTypeId.HYBRID);
|
|
skyviewControl.className = 'selected_btn';
|
|
roadmapControl.className = 'btn';
|
|
}
|
|
}
|
|
|
|
// 지도 확대, 축소 컨트롤에서 확대 버튼을 누르면 호출되어 지도를 확대하는 함수입니다
|
|
function zoomIn() {
|
|
map.setLevel(map.getLevel() - 1);
|
|
}
|
|
|
|
// 지도 확대, 축소 컨트롤에서 축소 버튼을 누르면 호출되어 지도를 확대하는 함수입니다
|
|
function zoomOut() {
|
|
map.setLevel(map.getLevel() + 1);
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html> |