"Panorama View Home"의 두 판 사이의 차이

hoonhyeok
이동: 둘러보기, 검색
(→‎배치도)
21번째 줄: 21번째 줄:
 
var mapContainer = document.getElementById('map'), // 지도를 표시할 div  
 
var mapContainer = document.getElementById('map'), // 지도를 표시할 div  
 
     mapOption = {  
 
     mapOption = {  
−
         center: new daum.maps.LatLng(35.91551925194255, 128.28380765238913), // 지도의 중심좌표
+
         center: new daum.maps.LatLng(35.915519, 128.283823), // 지도의 중심좌표
 
         level: 13 // 지도의 확대 레벨
 
         level: 13 // 지도의 확대 레벨
 
     };
 
     };
56번째 줄: 56번째 줄:
 
// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
 
// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
 
var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imageOption),
 
var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imageOption),
−
     markerPosition = new daum.maps.LatLng(35.91551925194255, 128.28380765238913); // 마커가 표시될 위치입니다
+
     markerPosition = new daum.maps.LatLng(35.915519, 128.283823); // 마커가 표시될 위치입니다
  
 
// 마커를 생성합니다
 
// 마커를 생성합니다
75번째 줄: 75번째 줄:
  
 
// 커스텀 오버레이가 표시될 위치입니다  
 
// 커스텀 오버레이가 표시될 위치입니다  
−
var position = new daum.maps.LatLng(35.91551925194255, 128.28380765238913);   
+
var position = new daum.maps.LatLng(35.915519, 128.283823);   
  
 
// 커스텀 오버레이를 생성합니다
 
// 커스텀 오버레이를 생성합니다
91번째 줄: 91번째 줄:
 
// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
 
// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
 
var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imageOption),
 
var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imageOption),
−
     markerPosition = new daum.maps.LatLng(37.57313526538597, 127.01821741560772); // 마커가 표시될 위치입니다
+
     markerPosition = new daum.maps.LatLng(37.573154, 127.018215); // 마커가 표시될 위치입니다
  
 
// 마커를 생성합니다
 
// 마커를 생성합니다
104번째 줄: 104번째 줄:
 
// 커스텀 오버레이에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
 
// 커스텀 오버레이에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
 
var content = '<div class="customoverlay">' +
 
var content = '<div class="customoverlay">' +
−
     '  <a href="http://dh.aks.ac.kr/~hoonhyeok/wiki/index.php/%EB%8C%80%EB%AC%B8" target="_blank">' +
+
     '  <a href="http://dh.aks.ac.kr/~hoonhyeok/pavilion/EastG/EastG-01.htm" target="_blank">' +
 
     '    <span class="title">동관왕묘</span>' +
 
     '    <span class="title">동관왕묘</span>' +
 
     '  </a>' +
 
     '  </a>' +
110번째 줄: 110번째 줄:
  
 
// 커스텀 오버레이가 표시될 위치입니다  
 
// 커스텀 오버레이가 표시될 위치입니다  
−
var position = new daum.maps.LatLng(37.57313526538597, 127.01821741560772);   
+
var position = new daum.maps.LatLng(37.573154, 127.018215);   
  
 
// 커스텀 오버레이를 생성합니다
 
// 커스텀 오버레이를 생성합니다
126번째 줄: 126번째 줄:
 
// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
 
// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
 
var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imageOption),
 
var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imageOption),
−
     markerPosition = new daum.maps.LatLng(34.400572105894476, 126.85975160128629); // 마커가 표시될 위치입니다
+
     markerPosition = new daum.maps.LatLng(34.400556, 126.859743); // 마커가 표시될 위치입니다
  
 
// 마커를 생성합니다
 
// 마커를 생성합니다
145번째 줄: 145번째 줄:
  
 
// 커스텀 오버레이가 표시될 위치입니다  
 
// 커스텀 오버레이가 표시될 위치입니다  
−
var position = new daum.maps.LatLng(34.400572105894476, 126.85975160128629);   
+
var position = new daum.maps.LatLng(34.400556, 126.859743);   
  
 
// 커스텀 오버레이를 생성합니다
 
// 커스텀 오버레이를 생성합니다
161번째 줄: 161번째 줄:
 
// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
 
// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
 
var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imageOption),
 
var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imageOption),
−
     markerPosition = new daum.maps.LatLng(36.56203988121762, 128.7101027176254); // 마커가 표시될 위치입니다
+
     markerPosition = new daum.maps.LatLng(36.562008, 128.710095); // 마커가 표시될 위치입니다
  
 
// 마커를 생성합니다
 
// 마커를 생성합니다
180번째 줄: 180번째 줄:
  
 
// 커스텀 오버레이가 표시될 위치입니다  
 
// 커스텀 오버레이가 표시될 위치입니다  
−
var position = new daum.maps.LatLng(36.56203988121762, 128.7101027176254);   
+
var position = new daum.maps.LatLng(36.562008, 128.710095);   
  
 
// 커스텀 오버레이를 생성합니다
 
// 커스텀 오버레이를 생성합니다
196번째 줄: 196번째 줄:
 
// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
 
// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
 
var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imageOption),
 
var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imageOption),
−
     markerPosition = new daum.maps.LatLng(35.40704865944236, 127.37576727965387); // 마커가 표시될 위치입니다
+
     markerPosition = new daum.maps.LatLng(35.407051, 127.375767); // 마커가 표시될 위치입니다
  
 
// 마커를 생성합니다
 
// 마커를 생성합니다
215번째 줄: 215번째 줄:
  
 
// 커스텀 오버레이가 표시될 위치입니다  
 
// 커스텀 오버레이가 표시될 위치입니다  
−
var position = new daum.maps.LatLng(35.40704865944236, 127.37576727965387);   
+
var position = new daum.maps.LatLng(35.407051, 127.375767);   
  
 
// 커스텀 오버레이를 생성합니다
 
// 커스텀 오버레이를 생성합니다
231번째 줄: 231번째 줄:
 
// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
 
// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
 
var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imageOption),
 
var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imageOption),
−
     markerPosition = new daum.maps.LatLng(37.74422192927029, 126.48200372544497); // 마커가 표시될 위치입니다
+
     markerPosition = new daum.maps.LatLng(37.744223, 126.482004); // 마커가 표시될 위치입니다
  
 
// 마커를 생성합니다
 
// 마커를 생성합니다
250번째 줄: 250번째 줄:
  
 
// 커스텀 오버레이가 표시될 위치입니다  
 
// 커스텀 오버레이가 표시될 위치입니다  
−
var position = new daum.maps.LatLng(37.74422192927029, 126.48200372544497);   
+
var position = new daum.maps.LatLng(37.744223, 126.482004); 
 +
 
 +
// 커스텀 오버레이를 생성합니다
 +
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.523876, 126.980489); // 마커가 표시될 위치입니다
 +
 
 +
// 마커를 생성합니다
 +
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/NorthG/NorthG-01.htm" target="_blank">' +
 +
    '    <span class="title">북묘 비</span>' +
 +
    '  </a>' +
 +
    '</div>';
 +
 
 +
// 커스텀 오버레이가 표시될 위치입니다
 +
var position = new daum.maps.LatLng(37.523876, 126.980489);   
  
 
// 커스텀 오버레이를 생성합니다
 
// 커스텀 오버레이를 생성합니다

2021년 10월 19일 (화) 19:25 판

배치도

이미지 마커와 커스텀 오버레이 + 지도에 지형도 표시하기

목록

NO. 지역 촬영 일시 좌표 Panorama View Page
1 동관왕묘 2021년 10월 1일 37.573154, 127.018215 [Panorama:1.동관왕묘]
2 고금도관왕묘 2021년 8월 11일 34.400556, 126.859743 [Panorama:2.고금도관왕묘]
3 안동관왕묘 2021년 9월 10일 36.562008, 128.710095 [Panorama:3.안동관왕묘]
4 성주관왕묘 2021년 7월 13일 35.915519, 128.283823 [Panorama:4.성주관왕묘]
5 남원관왕묘 2021년 9월 3일 35.407051, 127.375767 [Panorama:5.남원관왕묘]
6 강화관제묘 2021년 9월 5일 37.744223, 126.482004 [Panorama:6.강화관제묘]
7 북묘 비 2021년 10월 1일 37.523876, 126.980489 [Panorama:7.북묘 비]
원본 주소 "http://dh.aks.ac.kr/~hoonhyeok/wiki/index.php?title=Panorama_View_Home&oldid=283"