61번째 줄:
61번째 줄: ==전자지도==
==전자지도==
− <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.407045398573686, 127.375766318096), // 지도의 중심좌표
− level: 5 // 지도의 확대 레벨
− };
−
− 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.407045398573686, 127.375766318096); // 마커가 표시될 위치입니다
−
− // 마커를 생성합니다
− 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.407045398573686, 127.375766318096);
−
− // 커스텀 오버레이를 생성합니다
− var customOverlay = new daum.maps.CustomOverlay({
− map: map,
− position: position,
− content: content,
− yAnchor: 1
− });
−
− </script>
− </body>
− </html>
==주석==
==주석==
개요 남원관왕묘는 1599년 임진왜란에 참전하기 위해 조선에 입국한 명나라 장수 유정(劉綎)이 세운 것이다. 본래 동문 밖에 세워졌으나 숙종 42년(1716)에 성 안으로 이전되었고, 영조 17년(1741)에 다시 성 서쪽으로 이전되어 현재의 남문로 위치에 자리를 잡았다. 건립자 유정이 직접 비문을 지어 세운 표석인 명조도독유정건묘사적비가 보존되어 남아있는데, 『청장관전서』의 남원관왕묘를 소개하는 글에서는 해당 비문이 매우 졸렬하고 거칠다고 평했다.
정조 5년(1781) 정조가 몸소 탄보묘(誕報廟)라 사액하였으며, 지금의 남원관왕묘 정전 건물에도 탄보묘 현판이 걸린 것을 확인할 수 있다.
사족으로 『삼국연의』에서 관우의 애마로 등장하는 적토마를 묘사한 그림인 '남원관왕묘 적토마도'가 묘 안에 보존돼있으며, 이 또한 문화적 가치를 인정받고 전라북도 유형문화재 제259호에 지정되어 관리받고 있다.
현황 현재 남원관왕묘는 전라북도 유형문화재 제22호에 지정되어 지자체의 관리를 받고 있다. 정전인 탄보묘 건물을 포함하여 외삼문, 내삼문, 동재, 서재, 비석군의 관리 상태도 양호한 편이다. 최근 2021년 4월부터 8월까지 기간 동안 보수공사가 진행되는 등 보존을 위한 노력도 꾸준히 이어지고 있는 듯하다.
관련 기록
지식 관계망
시각자료 파노라마
스틸 갤러리 전자지도 주석 
