Jih8288: 9월 상반 답사지도

2019-08-28T04:14:35Z

9월 상반 답사지도

새 문서

==9월 5일 ~ 8일 답사지 지도==

<html>
<head>
<meta charset="utf-8">
<title>이미지 마커와 커스텀 오버레이 + 지도에 지형도 표시하기</title>
<style>
.customoverlay {position:relative;bottom:85px;border-radius:6px;border: 1px solid #ccc;border-bottom:2px solid #ddd;float:left;}
.customoverlay:nth-of-type(n) {border:0; box-shadow:0px 1px 2px #888;}
.customoverlay a {display:block;text-decoration:none;color:#000;text-align:center;border-radius:6px;font-size:14px;font-weight:bold;overflow:hidden;background: #d95050;background: #d95050 url(http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/arrow_white.png) no-repeat right 14px center;}
.customoverlay .title {display:block;text-align:center;background:#fff;margin-right:35px;padding:10px 15px;font-size:14px;font-weight:bold;}
.customoverlay:after {content:'';position:absolute;margin-left:-12px;left:50%;bottom:-12px;width:22px;height:12px;background:url('http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png')}
</style>
</head>

<body>
<div id="map" style="width:900px;height:500px;"></div>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=89916f622dee27781f9dd08224b875a1"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new daum.maps.LatLng(37.002588, 127.884293), // 지도의 중심좌표
level: 12 // 지도의 확대 레벨
};

var map = new daum.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

// 지도에 지형정보를 표시하도록 지도타입을 추가합니다
map.addOverlayMapTypeId(daum.maps.MapTypeId.TERRAIN);

// 아래 코드는 위에서 추가한 지형정보 지도타입을 제거합니다
map.removeOverlayMapTypeId(daum.maps.MapTypeId.TERRAIN);

// 일반뷰와 스카이뷰로 타입 전환이 가능한 컨트롤 생성
var mapTypeControl = new daum.maps.MapTypeControl();

// 지도에 컨트롤을 추가해야 지도위에 표시됩니다
// daum.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);

// 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다
var zoomControl = new daum.maps.ZoomControl();
map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);

//지형정보 표시
//map.addOverlayMapTypeId(daum.maps.MapTypeId.TERRAIN);

// 아래 코드는 위에서 추가한 지형정보 지도타입 제거
//map.removeOverlayMapTypeId(daum.maps.MapTypeId.TERRAIN);

var imageSrc = 'http://dh.aks.ac.kr/~ssn/images/marker_red.png', // 마커이미지의 주소입니다
imageSize = new daum.maps.Size(50, 50), // 마커이미지의 크기입니다
imageOption = {offset: new daum.maps.Point(27, 69)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.

// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imageOption),
markerPosition = new daum.maps.LatLng(37.392376, 127.053941); // 마커가 표시될 위치입니다

// 마커를 생성합니다
var marker = new daum.maps.Marker({
position: markerPosition,
image: markerImage // 마커이미지 설정
});

// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);

// 커스텀 오버레이에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
var content = '<div class="customoverlay">' +
' <a href="http://dh.aks.ac.kr/Encyves/Pavilions/D016/Sebongsaji.htm" target="_blank">' +
' <span class="title">한국학중앙연구원</span>' +
' </a>' +
'</div>';

// 커스텀 오버레이가 표시될 위치입니다
var position = new daum.maps.LatLng(37.392376, 127.053941);

// 커스텀 오버레이를 생성합니다
var customOverlay = new daum.maps.CustomOverlay({
map: map,
position: position,
content: content,
yAnchor: 1
});

var imageSrc = 'http://dh.aks.ac.kr/~ssn/images/marker_red.png', // 마커이미지의 주소입니다
imageSize = new daum.maps.Size(50, 50), // 마커이미지의 크기입니다
imageOption = {offset: new daum.maps.Point(27, 69)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.

// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imageOption),
markerPosition = new daum.maps.LatLng(35.998510, 128.779231); // 마커가 표시될 위치입니다

// 마커를 생성합니다
var marker = new daum.maps.Marker({
position: markerPosition,
image: markerImage // 마커이미지 설정
});

// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);

// 커스텀 오버레이에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
var content = '<div class="customoverlay">' +
' <a href="http://dh.aks.ac.kr/Encyves/Pavilions/D037/Eokjeongsaji.htm" target="_blank">' +
' <span class="title">인종 태실지</span>' +
' </a>' +
'</div>';

// 커스텀 오버레이가 표시될 위치입니다
var position = new daum.maps.LatLng(35.998510, 128.779231);

// 커스텀 오버레이를 생성합니다
var customOverlay = new daum.maps.CustomOverlay({
map: map,
position: position,
content: content,
yAnchor: 1
});

var imageSrc = 'http://dh.aks.ac.kr/~ssn/images/marker_red.png', // 마커이미지의 주소입니다
imageSize = new daum.maps.Size(50, 50), // 마커이미지의 크기입니다
imageOption = {offset: new daum.maps.Point(27, 69)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.

// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imageOption),
markerPosition = new daum.maps.LatLng(35.840754, 128.280020); // 마커가 표시될 위치입니다

// 마커를 생성합니다
var marker = new daum.maps.Marker({
position: markerPosition,
image: markerImage // 마커이미지 설정
});

// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);

// 커스텀 오버레이에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
var content = '<div class="customoverlay">' +
' <a href="http://dh.aks.ac.kr/Encyves/Pavilions/D016/Sebongsaji.htm" target="_blank">' +
' <span class="title">태종 태실지</span>' +
' </a>' +
'</div>';

// 커스텀 오버레이가 표시될 위치입니다
var position = new daum.maps.LatLng(35.840754, 128.280020);

// 커스텀 오버레이를 생성합니다
var customOverlay = new daum.maps.CustomOverlay({
map: map,
position: position,
content: content,
yAnchor: 1
});

var imageSrc = 'http://dh.aks.ac.kr/~ssn/images/marker_red.png', // 마커이미지의 주소입니다
imageSize = new daum.maps.Size(50, 50), // 마커이미지의 크기입니다
imageOption = {offset: new daum.maps.Point(27, 69)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.

// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imageOption),
markerPosition = new daum.maps.LatLng(36.014171, 128.294886); // 마커가 표시될 위치입니다

// 마커를 생성합니다
var marker = new daum.maps.Marker({
position: markerPosition,
image: markerImage // 마커이미지 설정
});

// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);

// 커스텀 오버레이에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
var content = '<div class="customoverlay">' +
' <a href="http://dh.aks.ac.kr/Encyves/Pavilions/D016/Sebongsaji.htm" target="_blank">' +
' <span class="title">세조 태실지</span>' +
' </a>' +
'</div>';

// 커스텀 오버레이가 표시될 위치입니다
var position = new daum.maps.LatLng(36.014171, 128.294886);

// 커스텀 오버레이를 생성합니다
var customOverlay = new daum.maps.CustomOverlay({
map: map,
position: position,
content: content,
yAnchor: 1
});

var imageSrc = 'http://dh.aks.ac.kr/~ssn/images/marker_red.png', // 마커이미지의 주소입니다
imageSize = new daum.maps.Size(50, 50), // 마커이미지의 크기입니다
imageOption = {offset: new daum.maps.Point(27, 69)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.

// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imageOption),
markerPosition = new daum.maps.LatLng(35.959064, 128.035308); // 마커가 표시될 위치입니다

// 마커를 생성합니다
var marker = new daum.maps.Marker({
position: markerPosition,
image: markerImage // 마커이미지 설정
});

// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);

// 커스텀 오버레이에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
var content = '<div class="customoverlay">' +
' <a href="http://dh.aks.ac.kr/Encyves/Pavilions/D016/Sebongsaji.htm" target="_blank">' +
' <span class="title">숙명/숙경공주 태실지</span>' +
' </a>' +
'</div>';

// 커스텀 오버레이가 표시될 위치입니다
var position = new daum.maps.LatLng(35.959064, 128.035308);

// 커스텀 오버레이를 생성합니다
var customOverlay = new daum.maps.CustomOverlay({
map: map,
position: position,
content: content,
yAnchor: 1
});

var imageSrc = 'http://dh.aks.ac.kr/~ssn/images/marker_red.png', // 마커이미지의 주소입니다
imageSize = new daum.maps.Size(50, 50), // 마커이미지의 크기입니다
imageOption = {offset: new daum.maps.Point(27, 69)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.

// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imageOption),
markerPosition = new daum.maps.LatLng(36.117881, 128.003751); // 마커가 표시될 위치입니다

// 마커를 생성합니다
var marker = new daum.maps.Marker({
position: markerPosition,
image: markerImage // 마커이미지 설정
});

// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);

// 커스텀 오버레이에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
var content = '<div class="customoverlay">' +
' <a href="http://dh.aks.ac.kr/Encyves/Pavilions/D016/Sebongsaji.htm" target="_blank">' +
' <span class="title">정종 태실지</span>' +
' </a>' +
'</div>';

// 커스텀 오버레이가 표시될 위치입니다
var position = new daum.maps.LatLng(36.117881, 128.003751);

// 커스텀 오버레이를 생성합니다
var customOverlay = new daum.maps.CustomOverlay({
map: map,
position: position,
content: content,
yAnchor: 1
});

var imageSrc = 'http://dh.aks.ac.kr/~ssn/images/marker_red.png', // 마커이미지의 주소입니다
imageSize = new daum.maps.Size(50, 50), // 마커이미지의 크기입니다
imageOption = {offset: new daum.maps.Point(27, 69)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.

// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imageOption),
markerPosition = new daum.maps.LatLng(36.299884, 127.984944); // 마커가 표시될 위치입니다

// 마커를 생성합니다
var marker = new daum.maps.Marker({
position: markerPosition,
image: markerImage // 마커이미지 설정
});

// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);

// 커스텀 오버레이에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
var content = '<div class="customoverlay">' +
' <a href="http://dh.aks.ac.kr/Encyves/Pavilions/D016/Sebongsaji.htm" target="_blank">' +
' <span class="title">안양군/완원군 태실지</span>' +
' </a>' +
'</div>';

// 커스텀 오버레이가 표시될 위치입니다
var position = new daum.maps.LatLng(36.299884, 127.984944);

// 커스텀 오버레이를 생성합니다
var customOverlay = new daum.maps.CustomOverlay({
map: map,
position: position,
content: content,
yAnchor: 1
});

var imageSrc = 'http://dh.aks.ac.kr/~ssn/images/marker_red.png', // 마커이미지의 주소입니다
imageSize = new daum.maps.Size(50, 50), // 마커이미지의 크기입니다
imageOption = {offset: new daum.maps.Point(27, 69)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.

// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imageOption),
markerPosition = new daum.maps.LatLng(36.444072, 127.946643); // 마커가 표시될 위치입니다

// 마커를 생성합니다
var marker = new daum.maps.Marker({
position: markerPosition,
image: markerImage // 마커이미지 설정
});

// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);

// 커스텀 오버레이에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
var content = '<div class="customoverlay">' +
' <a href="http://dh.aks.ac.kr/Encyves/Pavilions/D016/Sebongsaji.htm" target="_blank">' +
' <span class="title">연산군 원자 금돌이 태실지</span>' +
' </a>' +
'</div>';

// 커스텀 오버레이가 표시될 위치입니다
var position = new daum.maps.LatLng(36.444072, 127.946643);

// 커스텀 오버레이를 생성합니다
var customOverlay = new daum.maps.CustomOverlay({
map: map,
position: position,
content: content,
yAnchor: 1
});

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

경북지역 답사지도 - 편집 역사

Jih8288: 9월 상반 답사지도