|
|
| (같은 사용자의 중간 판 4개는 보이지 않습니다) |
| 1번째 줄: |
1번째 줄: |
| − | ==배치도==
| |
| − | <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:800px;height:600px;"></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(35.91551925194255, 128.28380765238913), // 지도의 중심좌표
| |
| − | level: 13 // 지도의 확대 레벨
| |
| − | };
| |
| − |
| |
| − | 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 = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png', // 마커이미지의 주소입니다
| |
| − | imageSize = new daum.maps.Size(40, 40), // 마커이미지의 크기입니다
| |
| − | imageOption = {offset: new daum.maps.Point(27, 69)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
| |
| − |
| |
| − | // 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
| |
| − | var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imageOption),
| |
| − | markerPosition = new daum.maps.LatLng(35.91551925194255, 128.28380765238913); // 마커가 표시될 위치입니다
| |
| − |
| |
| − | // 마커를 생성합니다
| |
| − | 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/~hoonhyeok/pavilion/SJG/SJG-02.htm" target="_blank">' +
| |
| − | ' <span class="title">성주관왕묘</span>' +
| |
| − | ' </a>' +
| |
| − | '</div>';
| |
| − |
| |
| − | // 커스텀 오버레이가 표시될 위치입니다
| |
| − | var position = new daum.maps.LatLng(35.91551925194255, 128.28380765238913);
| |
| − |
| |
| − | // 커스텀 오버레이를 생성합니다
| |
| − | var customOverlay = new daum.maps.CustomOverlay({
| |
| − | map: map,
| |
| − | position: position,
| |
| − | content: content,
| |
| − | yAnchor: 1
| |
| − | });
| |
| − |
| |
| − | var imageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png', // 마커이미지의 주소입니다
| |
| − | imageSize = new daum.maps.Size(40, 40), // 마커이미지의 크기입니다
| |
| − | imageOption = {offset: new daum.maps.Point(27, 69)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
| |
| − |
| |
| − | // 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
| |
| − | var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imageOption),
| |
| − | markerPosition = new daum.maps.LatLng(37.57313526538597, 127.01821741560772); // 마커가 표시될 위치입니다
| |
| − |
| |
| − | // 마커를 생성합니다
| |
| − | 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/~hoonhyeok/wiki/index.php/%EB%8C%80%EB%AC%B8" target="_blank">' +
| |
| − | ' <span class="title">동관왕묘</span>' +
| |
| − | ' </a>' +
| |
| − | '</div>';
| |
| − |
| |
| − | // 커스텀 오버레이가 표시될 위치입니다
| |
| − | var position = new daum.maps.LatLng(37.57313526538597, 127.01821741560772);
| |
| − |
| |
| − | // 커스텀 오버레이를 생성합니다
| |
| − | var customOverlay = new daum.maps.CustomOverlay({
| |
| − | map: map,
| |
| − | position: position,
| |
| − | content: content,
| |
| − | yAnchor: 1
| |
| − | });
| |
| − |
| |
| − | var imageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png', // 마커이미지의 주소입니다
| |
| − | imageSize = new daum.maps.Size(40, 40), // 마커이미지의 크기입니다
| |
| − | imageOption = {offset: new daum.maps.Point(27, 69)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
| |
| − |
| |
| − | // 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
| |
| − | var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imageOption),
| |
| − | markerPosition = new daum.maps.LatLng(34.400572105894476, 126.85975160128629); // 마커가 표시될 위치입니다
| |
| − |
| |
| − | // 마커를 생성합니다
| |
| − | 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/~hoonhyeok/pavilion/GGG/GG-01.htm" target="_blank">' +
| |
| − | ' <span class="title">고금도관왕묘</span>' +
| |
| − | ' </a>' +
| |
| − | '</div>';
| |
| − |
| |
| − | // 커스텀 오버레이가 표시될 위치입니다
| |
| − | var position = new daum.maps.LatLng(34.400572105894476, 126.85975160128629);
| |
| − |
| |
| − | // 커스텀 오버레이를 생성합니다
| |
| − | var customOverlay = new daum.maps.CustomOverlay({
| |
| − | map: map,
| |
| − | position: position,
| |
| − | content: content,
| |
| − | yAnchor: 1
| |
| − | });
| |
| − |
| |
| − | var imageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png', // 마커이미지의 주소입니다
| |
| − | imageSize = new daum.maps.Size(40, 40), // 마커이미지의 크기입니다
| |
| − | imageOption = {offset: new daum.maps.Point(27, 69)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
| |
| − |
| |
| − | // 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
| |
| − | var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imageOption),
| |
| − | markerPosition = new daum.maps.LatLng(36.56203988121762, 128.7101027176254); // 마커가 표시될 위치입니다
| |
| − |
| |
| − | // 마커를 생성합니다
| |
| − | 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/~hoonhyeok/pavilion/ADG/ADG-01.htm" target="_blank">' +
| |
| − | ' <span class="title">안동관왕묘</span>' +
| |
| − | ' </a>' +
| |
| − | '</div>';
| |
| − |
| |
| − | // 커스텀 오버레이가 표시될 위치입니다
| |
| − | var position = new daum.maps.LatLng(36.56203988121762, 128.7101027176254);
| |
| − |
| |
| − | // 커스텀 오버레이를 생성합니다
| |
| − | var customOverlay = new daum.maps.CustomOverlay({
| |
| − | map: map,
| |
| − | position: position,
| |
| − | content: content,
| |
| − | yAnchor: 1
| |
| − | });
| |
| − |
| |
| − | var imageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png', // 마커이미지의 주소입니다
| |
| − | imageSize = new daum.maps.Size(40, 40), // 마커이미지의 크기입니다
| |
| − | imageOption = {offset: new daum.maps.Point(27, 69)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
| |
| − |
| |
| − | // 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
| |
| − | var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imageOption),
| |
| − | markerPosition = new daum.maps.LatLng(35.40704865944236, 127.37576727965387); // 마커가 표시될 위치입니다
| |
| − |
| |
| − | // 마커를 생성합니다
| |
| − | 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/~hoonhyeok/pavilion/NWG/NWG-01.htm" target="_blank">' +
| |
| − | ' <span class="title">남원관왕묘</span>' +
| |
| − | ' </a>' +
| |
| − | '</div>';
| |
| − |
| |
| − | // 커스텀 오버레이가 표시될 위치입니다
| |
| − | var position = new daum.maps.LatLng(35.40704865944236, 127.37576727965387);
| |
| − |
| |
| − | // 커스텀 오버레이를 생성합니다
| |
| − | var customOverlay = new daum.maps.CustomOverlay({
| |
| − | map: map,
| |
| − | position: position,
| |
| − | content: content,
| |
| − | yAnchor: 1
| |
| − | });
| |
| − |
| |
| − | var imageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png', // 마커이미지의 주소입니다
| |
| − | imageSize = new daum.maps.Size(40, 40), // 마커이미지의 크기입니다
| |
| − | imageOption = {offset: new daum.maps.Point(27, 69)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
| |
| − |
| |
| − | // 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
| |
| − | var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imageOption),
| |
| − | markerPosition = new daum.maps.LatLng(37.74422192927029, 126.48200372544497); // 마커가 표시될 위치입니다
| |
| − |
| |
| − | // 마커를 생성합니다
| |
| − | 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/~hoonhyeok/pavilion/GH/GH-01.htm" target="_blank">' +
| |
| − | ' <span class="title">강화관제묘</span>' +
| |
| − | ' </a>' +
| |
| − | '</div>';
| |
| − |
| |
| − | // 커스텀 오버레이가 표시될 위치입니다
| |
| − | var position = new daum.maps.LatLng(37.74422192927029, 126.48200372544497);
| |
| − |
| |
| − | // 커스텀 오버레이를 생성합니다
| |
| − | var customOverlay = new daum.maps.CustomOverlay({
| |
| − | map: map,
| |
| − | position: position,
| |
| − | content: content,
| |
| − | yAnchor: 1
| |
| − | });
| |
| − |
| |
| − | </script>
| |
| − | </body>
| |
| − | </html>
| |
| − |
| |
| | ==목록== | | ==목록== |
| | {| class="wikitable sortable" style="width:100%; background:white;" | | {| class="wikitable sortable" style="width:100%; background:white;" |
| | ! NO. || 지역 || 촬영 일시 || 좌표 || Panorama View Page | | ! NO. || 지역 || 촬영 일시 || 좌표 || Panorama View Page |
| | |- | | |- |
| − | | 1 || 동관왕묘 || 년 월 일 || 37.57313526538597, 127.01821741560772 || | + | | 1 || 동관왕묘 || 2021년 10월 1일 || 37.573154, 127.018215 || [[http://dh.aks.ac.kr/~hoonhyeok/wiki/index.php/%EB%8F%99%EA%B4%80%EC%99%95%EB%AC%98#.ED.8C.8C.EB.85.B8.EB.9D.BC.EB.A7.88 Panorama:1.동관왕묘]] |
| | |- | | |- |
| − | | 2 || 고금도관왕묘 || 2021년 8월 11일 || 34.400572105894476, 126.85975160128629 || [[http://dh.aks.ac.kr/~hoonhyeok/wiki/index.php/%EA%B3%A0%EA%B8%88%EB%8F%84%EA%B4%80%EC%99%95%EB%AC%98#.ED.8C.8C.EB.85.B8.EB.9D.BC.EB.A7.88 Panorama:2.고금도관왕묘]] | + | | 2 || 고금도관왕묘 || 2021년 8월 11일 || 34.400556, 126.859743 || [[http://dh.aks.ac.kr/~hoonhyeok/wiki/index.php/%EA%B3%A0%EA%B8%88%EB%8F%84%EA%B4%80%EC%99%95%EB%AC%98#.ED.8C.8C.EB.85.B8.EB.9D.BC.EB.A7.88 Panorama:2.고금도관왕묘]] |
| | |- | | |- |
| − | | 3 || 안동관왕묘 || 2021년 9월 10일 || 36.56203988121762, 128.7101027176254 || [[http://dh.aks.ac.kr/~hoonhyeok/wiki/index.php/%EC%95%88%EB%8F%99%EA%B4%80%EC%99%95%EB%AC%98#.ED.8C.8C.EB.85.B8.EB.9D.BC.EB.A7.88 Panorama:3.안동관왕묘]] | + | | 3 || 안동관왕묘 || 2021년 9월 10일 || 36.562008, 128.710095 || [[http://dh.aks.ac.kr/~hoonhyeok/wiki/index.php/%EC%95%88%EB%8F%99%EA%B4%80%EC%99%95%EB%AC%98#.ED.8C.8C.EB.85.B8.EB.9D.BC.EB.A7.88 Panorama:3.안동관왕묘]] |
| | |- | | |- |
| − | | 4 || 성주관왕묘 || 2021년 7월 13일 || 35.91551925194255, 128.28380765238913 || [[http://dh.aks.ac.kr/~hoonhyeok/wiki/index.php/%EC%84%B1%EC%A3%BC%EA%B4%80%EC%99%95%EB%AC%98#.ED.8C.8C.EB.85.B8.EB.9D.BC.EB.A7.88 Panorama:4.성주관왕묘]] | + | | 4 || 성주관왕묘 || 2021년 7월 13일 || 35.915519, 128.283823 || [[http://dh.aks.ac.kr/~hoonhyeok/wiki/index.php/%EC%84%B1%EC%A3%BC%EA%B4%80%EC%99%95%EB%AC%98#.ED.8C.8C.EB.85.B8.EB.9D.BC.EB.A7.88 Panorama:4.성주관왕묘]] |
| | |- | | |- |
| − | | 5 || 남원관왕묘 || 2021년 9월 3일 || 35.40704865944236, 127.37576727965387 || [[http://dh.aks.ac.kr/~hoonhyeok/wiki/index.php/%EB%82%A8%EC%9B%90%EA%B4%80%EC%99%95%EB%AC%98#.ED.8C.8C.EB.85.B8.EB.9D.BC.EB.A7.88 Panorama:5.남원관왕묘]] | + | | 5 || 남원관왕묘 || 2021년 9월 3일 || 35.407051, 127.375767 || [[http://dh.aks.ac.kr/~hoonhyeok/wiki/index.php/%EB%82%A8%EC%9B%90%EA%B4%80%EC%99%95%EB%AC%98#.ED.8C.8C.EB.85.B8.EB.9D.BC.EB.A7.88 Panorama:5.남원관왕묘]] |
| | |- | | |- |
| − | | 6 || 강화관제묘 || 2021년 9월 5일 || 35.40704865944236, 127.37576727965387 || [[http://dh.aks.ac.kr/~hoonhyeok/wiki/index.php/%EA%B0%95%ED%99%94%EA%B4%80%EC%A0%9C%EB%AC%98#.ED.8C.8C.EB.85.B8.EB.9D.BC.EB.A7.88 Panorama:6.강화관제묘]] | + | | 6 || 강화관제묘 || 2021년 9월 5일 || 37.744223, 126.482004 || [[http://dh.aks.ac.kr/~hoonhyeok/wiki/index.php/%EA%B0%95%ED%99%94%EA%B4%80%EC%A0%9C%EB%AC%98#.ED.8C.8C.EB.85.B8.EB.9D.BC.EB.A7.88 Panorama:6.강화관제묘]] |
| | + | |- |
| | + | | 7 || 북묘 비 || 2021년 10월 1일 || 37.523876, 126.980489 || [[http://dh.aks.ac.kr/~hoonhyeok/wiki/index.php/%EB%B6%81%EA%B4%80%EC%99%95%EB%AC%98#.ED.8C.8C.EB.85.B8.EB.9D.BC.EB.A7.88 Panorama:7.북묘 비]] |
| | |- | | |- |
| | |} | | |} |
