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

hoonhyeok
이동: 둘러보기, 검색
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/Encyves/Pavilions/D037/Eokjeongsaji.htm" target="_blank">' +
+
     '  <a href="http://dh.aks.ac.kr/~hoonhyeok/wiki/index.php/%EB%8C%80%EB%AC%B8" target="_blank">' +
 
     '    <span class="title">남관왕묘</span>' +
 
     '    <span class="title">남관왕묘</span>' +
 
     '  </a>' +
 
     '  </a>' +
120번째 줄: 120번째 줄:
 
});
 
});
  
 +
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/wiki/index.php/%EB%8C%80%EB%AC%B8" 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/wiki/index.php/%EB%8C%80%EB%AC%B8" 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/wiki/index.php/%EB%8C%80%EB%AC%B8" 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
 +
});
  
 
</script>
 
</script>

2021년 7월 13일 (화) 18:52 판

배치도

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

목록

NO. 지역 촬영 일시 특이사항 Street View Page
1 남관왕묘 년 월 일 Panorama:1.남관왕묘
2 동관왕묘 년 월 일 Panorama:2.동관왕묘
3 강진관왕묘 년 월 일 Panorama:3.강진관왕묘
4 안동관왕묘 년 월 일 Panorama:4.안동관왕묘
5 성주관왕묘 2021년 7월 13일 Panorama:5.성주관왕묘
6 남원관왕묘 년 월 일 Panorama:6.남원관왕묘