"대문"의 두 판 사이의 차이

SeosamneungWiki.
둘러보기로 가기 검색하러 가기
(내용을 "*54기의 태실 지도 보기"(으)로 바꿈)
태그: 대체됨
1번째 줄: 1번째 줄:
 
*54기의 태실 지도 보기
 
*54기의 태실 지도 보기
 +
==앙==
 +
<html>
 +
<head>
 +
    <meta charset="utf-8">
 +
    <title>서삼릉 태실</title>
 +
 +
</head>
 +
<body>
 +
<div id="map" style="width:100%;height:800px;"></div>
 +
<p>
 +
    <button onclick="removeCircles()">모두 지우기</button> <br>
 +
</p>
 +
<em>
 +
    지도를 마우스로 클릭하면 원 그리기가 시작되고 오른쪽 마우스를 클릭하면 원 그리기가 종료됩니다<br>
 +
    마커에 마우스 커서를 올리면 마커의 타이틀이 표시됩니다
 +
</em>
 +
 +
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=904830edc69d8b9c52b08754aedabab6"></script>
 +
<script>
 +
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
 +
    mapOption = {
 +
        center: new daum.maps.LatLng(36.700924871409846, 127.89203104886059), // 지도의 중심좌표 '남한의 중심'
 +
        level: 12 // 지도의 확대 레벨
 +
    };
 +
 +
// 지도를 생성합니다
 +
var map = new daum.maps.Map(mapContainer, mapOption);
 +
 +
// 일반뷰와 스카이뷰로 타입 전환이 가능한 컨트롤 생성
 +
var mapTypeControl = new daum.maps.MapTypeControl();
 +
 +
// 지도에 컨트롤을 추가해야 지도위에 표시됩니다
 +
// daum.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
 +
map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);
 +
 +
 +
  // 마커(주요주거지)를 표시할 위치와 title 객체 배열입니다
 +
  var positions = [
 +
 +
      {
 +
          title: '태조 태실(충남 금산)',
 +
          latlng: new daum.maps.LatLng(36.199347383595516, 127.45263737306487)
 +
      },
 +
      {
 +
          title: '정종 태실(경북 김천)',
 +
          latlng: new daum.maps.LatLng(36.11842277362998, 128.00431535357896)
 +
      },
 +
      {
 +
          title: '태종 태실(경북 성주)',
 +
          latlng: new daum.maps.LatLng(35.84022138342852, 128.2797255352344)
 +
      },
 +
      {
 +
          title: '세종 태실(경남 사천)',
 +
          latlng: new daum.maps.LatLng(35.13624458440828, 127.90347171519944)
 +
      },
 +
      {
 +
          title: '문종 태실(경북 예천)',
 +
          latlng: new daum.maps.LatLng(36.782256662012266, 128.37608348281387)
 +
      },
 +
      {
 +
          title: '세조 태실(경북 성주)',
 +
          latlng: new daum.maps.LatLng(36.01444181372508, 128.2948527173114)
 +
      },
 +
      {
 +
          title: '예종 태실(전북 완주)',
 +
          latlng: new daum.maps.LatLng(35.750872807322814, 127.14298654817499)
 +
      },
 +
      {
 +
          title: '성종 태실(경기 광주)',
 +
          latlng: new daum.maps.LatLng(37.39226026118204, 127.23187683031081)
 +
      },
 +
      {
 +
          title: '중종 태실(경기 가평)',
 +
          latlng: new daum.maps.LatLng(37.80448040600422, 127.47853215114652)
 +
      },
 +
      {
 +
          title: '인종 태실(경북 영천)',
 +
          latlng: new daum.maps.LatLng(35.99725097622559, 128.77680238869596)
 +
      },
 +
      {
 +
          title: '명종 태실(충남 서산)',
 +
          latlng: new daum.maps.LatLng(36.77918419423323, 126.5785921974864)
 +
      },
 +
      {
 +
          title: '선조 태실(충남 부여)',
 +
          latlng: new daum.maps.LatLng(36.14854787321314, 126.80469606159004)
 +
      },
 +
      {
 +
          title: '숙종 태실(충남 공주)',
 +
          latlng: new daum.maps.LatLng(36.41119194460032, 127.09655959331565)
 +
      },
 +
      {
 +
          title: '경종 태실(충북 충주)',
 +
          latlng: new daum.maps.LatLng(37.109013782420135, 127.92718861345476)
 +
      },
 +
      {
 +
          title: '영조 태실(충북 청주)',
 +
          latlng: new daum.maps.LatLng(36.65368734654247, 127.58010381457947)
 +
      },
 +
      {
 +
          title: '장조 태실(경북 예천)',
 +
          latlng: new daum.maps.LatLng(36.78224887671377, 128.3760749423282)
 +
      },
 +
      {
 +
          title: '정조 태실(강원 영월)',
 +
          latlng: new daum.maps.LatLng(37.162244903387354, 128.49790120152375)
 +
      },
 +
      {
 +
          title: '순조 태실(충북 보은)',
 +
          latlng: new daum.maps.LatLng(36.54680939364752, 127.85530887958986)
 +
      },
 +
      {
 +
          title: '헌종 태실(충남 예산)',
 +
          latlng: new daum.maps.LatLng(36.706553756010855, 126.65387874271913)
 +
      },
 +
      {
 +
          title: '순종 태실(충남 홍성)',
 +
          latlng: new daum.maps.LatLng(36.56924479660332, 126.59721367024036)
 +
      },
 +
      {
 +
          title: '인성대군 태실(경남 사천)',
 +
          latlng: new daum.maps.LatLng(35.133949261731814, 127.89851454625692)
 +
      },
 +
      {
 +
          title: '연산군모 윤씨 태실(경북 예천)',
 +
          latlng: new daum.maps.LatLng(36.729576538138666, 128.37252049523838)
 +
      },
 +
      {
 +
          title: '안양군과 완원군 태실(경북 상주)',
 +
          latlng: new daum.maps.LatLng(36.29935236662513, 127.98642006751474)
 +
      },
 +
      {
 +
          title: '견성군 태실(강원 양양)',
 +
          latlng: new daum.maps.LatLng(38.14721016250985, 128.58517459742578)
 +
      },
 +
      {
 +
          title: '연산군 원자 금돌이 태실(경북 상주)',
 +
          latlng: new daum.maps.LatLng(36.444043870254596, 127.94673453374786)
 +
      },
 +
      {
 +
          title: '연산군 자 인수 태실(경북 문경)',
 +
          latlng: new daum.maps.LatLng(36.64497535209448, 128.0763617699)
 +
      },
 +
      {
 +
          title: '연산군 녀 복억 태실(강원 삼척)',
 +
          latlng: new daum.maps.LatLng(37.43780332595574, 129.1322200135358)
 +
      },
 +
      {
 +
          title: '인성군 태실(충북 청원',
 +
          latlng: new daum.maps.LatLng(36.48668563307397, 127.5127401604589)
 +
      },
 +
      {
 +
          title: '인흥군 태실(경북 상주)',
 +
          latlng: new daum.maps.LatLng(36.54683601187472, 128.208133330519)
 +
      },
 +
      {
 +
          title: '숙명 및 숙경 공주 태실(경북 김천)',
 +
          latlng: new daum.maps.LatLng(35.95845806691518, 128.03636145637273)
 +
      },
 +
      {
 +
          title: '숙휘 및 숙정 공주 태실(강원 원주)',
 +
          latlng: new daum.maps.LatLng(37.26379667795251, 127.87255077357017)
 +
      },
 +
      {
 +
          title: '명선공주 태실(충남 보령)',
 +
          latlng: new daum.maps.LatLng(36.182605806837365, 126.65855073374567)
 +
      },
 +
      {
 +
          title: '연령군 태실(충남 예산)',
 +
          latlng: new daum.maps.LatLng(36.6928541916749, 126.89663576078219)
 +
      },
 +
      {
 +
          title: '화령옹주 태실(충남 예산)',
 +
          latlng: new daum.maps.LatLng(36.59720886890018, 126.81702416372639)
 +
      },
 +
      {
 +
          title: '의소세손 태실(경북 영주)',
 +
          latlng: new daum.maps.LatLng(36.83996755323398, 128.62379720757636)
 +
      },
 +
      {
 +
          title: '문효세자 태실(경북 예천)',
 +
          latlng: new daum.maps.LatLng(36.73812824983512, 128.36619068770588)
 +
      },
 +
      {
 +
          title: '철종왕세자 태실(강원 영월)',
 +
          latlng: new daum.maps.LatLng(37.267565307738096, 128.2639240148207)
 +
      },
 +
      {
 +
          title: '의혜공주 태실(충남 부여)',
 +
          latlng: new daum.maps.LatLng(36.3044387043973, 126.88372324496322)
 +
      },
 +
      {
 +
          title: '창덕궁 후원 4기',
 +
          latlng: new daum.maps.LatLng(37.58405731405349, 126.99103890165898)
 +
      },
 +
      {
 +
          title: '경평군 태실(대전광역시)',
 +
          latlng: new daum.maps.LatLng(36.30569284336664, 127.35688933313965)
 +
      },
 +
      {
 +
          title: '',
 +
          latlng: new daum.maps.LatLng()
 +
      },
 +
  ];
 +
 +
  // 마커 이미지의 이미지 주소입니다
 +
  var imageSrc = "http://www.bigstamp.co.kr/images/placeholder_grave.png";
 +
 +
  for (var i = 0; i < positions.length; i ++) {
 +
 +
      // 마커 이미지의 이미지 크기 입니다
 +
      var imageSize = new daum.maps.Size(40, 54);
 +
 +
      // 마커 이미지를 생성합니다
 +
      var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize);
 +
 +
      // 마커를 생성합니다
 +
      var marker = new daum.maps.Marker({
 +
          map: map, // 마커를 표시할 지도
 +
          position: positions[i].latlng, // 마커를 표시할 위치
 +
          title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
 +
          image : markerImage // 마커 이미지
 +
      });
 +
  }
 +
 +
 +
  // 마커(주요주거지)를 표시할 위치와 title 객체 배열입니다
 +
  var positions = [
 +
 +
      {
 +
          title: '왕자수장(봉안군)과 왕녀영수의 태실추정지역',
 +
          latlng: new daum.maps.LatLng(37.70781040291641, 127.16105722951934)
 +
      },
 +
      {
 +
          title: '덕흥대원군의 태실추정지역',
 +
          latlng: new daum.maps.LatLng(36.19794502973453, 127.46028312483477)
 +
      },
 +
      {
 +
          title: '영조왕녀 화유옹주 태실추정지역',
 +
          latlng: new daum.maps.LatLng(36.85171971024932, 126.67720794876527)
 +
      },
 +
      {
 +
          title: '영조왕녀 화길옹주 태실추정지역',
 +
          latlng: new daum.maps.LatLng(36.91000417118545, 128.41289723200447)
 +
      },
 +
      {
 +
          title: '영산군 태실추정지역',
 +
          latlng: new daum.maps.LatLng(37.99808900090728, 126.98444806698953)
 +
      },
 +
];
 +
 +
// 마커 이미지의 이미지 주소입니다
 +
var imageSrc = "http://www.bigstamp.co.kr/images/placeholder_grave_red.png";
 +
 +
for (var i = 0; i < positions.length; i ++) {
 +
 +
    // 마커 이미지의 이미지 크기 입니다
 +
    var imageSize = new daum.maps.Size(40, 54);
 +
 +
    // 마커 이미지를 생성합니다
 +
    var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize);
 +
 +
    // 마커를 생성합니다
 +
    var marker = new daum.maps.Marker({
 +
        map: map, // 마커를 표시할 지도
 +
        position: positions[i].latlng, // 마커를 표시할 위치
 +
        title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
 +
        image : markerImage // 마커 이미지
 +
    });
 +
}
 +
 +
 +
 +
 +
// 지도에 표시할 원을 생성합니다
 +
var circle = new daum.maps.Circle({
 +
    center : new daum.maps.LatLng(34.605759, 126.658210),  // 원의 중심좌표 입니다
 +
    radius: 20000, // 미터 단위의 원의 반지름입니다
 +
    strokeWeight: 5, // 선의 두께입니다
 +
    strokeColor: '#75B8FA', // 선의 색깔입니다
 +
    strokeOpacity: 1, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
 +
    strokeStyle: 'dashed', // 선의 스타일 입니다
 +
    fillColor: '#CFE7FF', // 채우기 색깔입니다
 +
    fillOpacity: 0.3  // 채우기 불투명도 입니다
 +
});
 +
 +
// 지도에 원을 표시합니다
 +
circle.setMap(map);
 +
 +
 +
 +
var drawingFlag = false; // 원이 그려지고 있는 상태를 가지고 있을 변수입니다
 +
var centerPosition; // 원의 중심좌표 입니다
 +
var drawingCircle; // 그려지고 있는 원을 표시할 원 객체입니다
 +
var drawingLine; // 그려지고 있는 원의 반지름을 표시할 선 객체입니다
 +
var drawingOverlay; // 그려지고 있는 원의 반경을 표시할 커스텀오버레이 입니다
 +
var drawingDot; // 그려지고 있는 원의 중심점을 표시할 커스텀오버레이 입니다
 +
 +
var circles = []; // 클릭으로 그려진 원과 반경 정보를 표시하는 선과 커스텀오버레이를 가지고 있을 배열입니다
 +
 +
// 지도에 클릭 이벤트를 등록합니다
 +
daum.maps.event.addListener(map, 'click', function(mouseEvent) {
 +
 +
    // 클릭 이벤트가 발생했을 때 원을 그리고 있는 상태가 아니면 중심좌표를 클릭한 지점으로 설정합니다
 +
    if (!drawingFlag) {
 +
 +
        // 상태를 그리고있는 상태로 변경합니다
 +
        drawingFlag = true;
 +
 +
        // 원이 그려질 중심좌표를 클릭한 위치로 설정합니다
 +
        centerPosition = mouseEvent.latLng;
 +
 +
        // 그려지고 있는 원의 반경을 표시할 선 객체를 생성합니다
 +
        if (!drawingLine) {
 +
            drawingLine = new daum.maps.Polyline({
 +
                strokeWeight: 3, // 선의 두께입니다
 +
                strokeColor: '#00a0e9', // 선의 색깔입니다
 +
                strokeOpacity: 1, // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
 +
                strokeStyle: 'solid' // 선의 스타일입니다
 +
            });
 +
        }
 +
 +
        // 그려지고 있는 원을 표시할 원 객체를 생성합니다
 +
        if (!drawingCircle) {
 +
            drawingCircle = new daum.maps.Circle({
 +
                strokeWeight: 1, // 선의 두께입니다
 +
                strokeColor: '#00a0e9', // 선의 색깔입니다
 +
                strokeOpacity: 0.1, // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
 +
                strokeStyle: 'solid', // 선의 스타일입니다
 +
                fillColor: '#00a0e9', // 채우기 색깔입니다
 +
                fillOpacity: 0.2 // 채우기 불투명도입니다
 +
            });
 +
        }
 +
 +
        // 그려지고 있는 원의 반경 정보를 표시할 커스텀오버레이를 생성합니다
 +
        if (!drawingOverlay) {
 +
            drawingOverlay = new daum.maps.CustomOverlay({
 +
                xAnchor: 0,
 +
                yAnchor: 0,
 +
                zIndex: 1
 +
            });
 +
        }
 +
    }
 +
    });
 +
 +
// 지도에 마우스무브 이벤트를 등록합니다
 +
// 원을 그리고있는 상태에서 마우스무브 이벤트가 발생하면 그려질 원의 위치와 반경정보를 동적으로 보여주도록 합니다
 +
daum.maps.event.addListener(map, 'mousemove', function (mouseEvent) {
 +
 +
    // 마우스무브 이벤트가 발생했을 때 원을 그리고있는 상태이면
 +
    if (drawingFlag) {
 +
 +
        // 마우스 커서의 현재 위치를 얻어옵니다
 +
        var mousePosition = mouseEvent.latLng;
 +
 +
        // 그려지고 있는 선을 표시할 좌표 배열입니다. 클릭한 중심좌표와 마우스커서의 위치로 설정합니다
 +
        var linePath = [centerPosition, mousePosition];
 +
 +
        // 그려지고 있는 선을 표시할 선 객체에 좌표 배열을 설정합니다
 +
        drawingLine.setPath(linePath);
 +
 +
        // 원의 반지름을 선 객체를 이용해서 얻어옵니다
 +
        var length = drawingLine.getLength();
 +
 +
        if(length > 0) {
 +
 +
            // 그려지고 있는 원의 중심좌표와 반지름입니다
 +
            var circleOptions = {
 +
                center : centerPosition,
 +
            radius: length,
 +
            };
 +
 +
            // 그려지고 있는 원의 옵션을 설정합니다
 +
            drawingCircle.setOptions(circleOptions);
 +
 +
            // 반경 정보를 표시할 커스텀오버레이의 내용입니다
 +
            var radius = Math.round(drawingCircle.getRadius()),
 +
            content = '<div class="info">반경 <span class="number">' + radius + '</span>m</div>';
 +
 +
            // 반경 정보를 표시할 커스텀 오버레이의 좌표를 마우스커서 위치로 설정합니다
 +
            drawingOverlay.setPosition(mousePosition);
 +
 +
            // 반경 정보를 표시할 커스텀 오버레이의 표시할 내용을 설정합니다
 +
            drawingOverlay.setContent(content);
 +
 +
            // 그려지고 있는 원을 지도에 표시합니다
 +
            drawingCircle.setMap(map);
 +
 +
            // 그려지고 있는 선을 지도에 표시합니다
 +
            drawingLine.setMap(map);
 +
 +
            // 그려지고 있는 원의 반경정보 커스텀 오버레이를 지도에 표시합니다
 +
            drawingOverlay.setMap(map);
 +
 +
        } else {
 +
 +
            drawingCircle.setMap(null);
 +
            drawingLine.setMap(null);
 +
            drawingOverlay.setMap(null);
 +
 +
        }
 +
    }
 +
});
 +
 +
// 지도에 마우스 오른쪽 클릭이벤트를 등록합니다
 +
// 원을 그리고있는 상태에서 마우스 오른쪽 클릭 이벤트가 발생하면
 +
// 마우스 오른쪽 클릭한 위치를 기준으로 원과 원의 반경정보를 표시하는 선과 커스텀 오버레이를 표시하고 그리기를 종료합니다
 +
daum.maps.event.addListener(map, 'rightclick', function (mouseEvent) {
 +
 +
    if (drawingFlag) {
 +
 +
        // 마우스로 오른쪽 클릭한 위치입니다
 +
        var rClickPosition = mouseEvent.latLng;
 +
 +
        // 원의 반경을 표시할 선 객체를 생성합니다
 +
        var polyline = new daum.maps.Polyline({
 +
            path: [centerPosition, rClickPosition], // 선을 구성하는 좌표 배열입니다. 원의 중심좌표와 클릭한 위치로 설정합니다
 +
            strokeWeight: 3, // 선의 두께 입니다
 +
            strokeColor: '#00a0e9', // 선의 색깔입니다
 +
            strokeOpacity: 1, // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
 +
            strokeStyle: 'solid' // 선의 스타일입니다
 +
        });
 +
 +
        // 원 객체를 생성합니다
 +
        var circle = new daum.maps.Circle({
 +
            center : centerPosition, // 원의 중심좌표입니다
 +
            radius: polyline.getLength(), // 원의 반지름입니다 m 단위 이며 선 객체를 이용해서 얻어옵니다
 +
            strokeWeight: 1, // 선의 두께입니다
 +
            strokeColor: '#00a0e9', // 선의 색깔입니다
 +
            strokeOpacity: 0.1, // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
 +
            strokeStyle: 'solid', // 선의 스타일입니다
 +
            fillColor: '#00a0e9', // 채우기 색깔입니다
 +
            fillOpacity: 0.2  // 채우기 불투명도입니다
 +
        });
 +
 +
        var radius = Math.round(circle.getRadius()), // 원의 반경 정보를 얻어옵니다
 +
            content = getTimeHTML(radius); // 커스텀 오버레이에 표시할 반경 정보입니다
 +
 +
 +
        // 반경정보를 표시할 커스텀 오버레이를 생성합니다
 +
        var radiusOverlay = new daum.maps.CustomOverlay({
 +
            content: content, // 표시할 내용입니다
 +
            position: rClickPosition, // 표시할 위치입니다. 클릭한 위치로 설정합니다
 +
            xAnchor: 0,
 +
            yAnchor: 0,
 +
            zIndex: 1
 +
        });
 +
 +
        // 원을 지도에 표시합니다
 +
        circle.setMap(map);
 +
 +
        // 선을 지도에 표시합니다
 +
        polyline.setMap(map);
 +
 +
        // 반경 정보 커스텀 오버레이를 지도에 표시합니다
 +
        radiusOverlay.setMap(map);
 +
 +
        // 배열에 담을 객체입니다. 원, 선, 커스텀오버레이 객체를 가지고 있습니다
 +
        var radiusObj = {
 +
            'polyline' : polyline,
 +
            'circle' : circle,
 +
            'overlay' : radiusOverlay
 +
        };
 +
 +
        // 배열에 추가합니다
 +
        // 이 배열을 이용해서 "모두 지우기" 버튼을 클릭했을 때 지도에 그려진 원, 선, 커스텀오버레이들을 지웁니다
 +
        circles.push(radiusObj);
 +
 +
        // 그리기 상태를 그리고 있지 않는 상태로 바꿉니다
 +
        drawingFlag = false;
 +
 +
        // 중심 좌표를 초기화 합니다
 +
        centerPosition = null;
 +
 +
        // 그려지고 있는 원, 선, 커스텀오버레이를 지도에서 제거합니다
 +
        drawingCircle.setMap(null);
 +
        drawingLine.setMap(null);
 +
        drawingOverlay.setMap(null);
 +
    }
 +
});
 +
 +
// 지도에 표시되어 있는 모든 원과 반경정보를 표시하는 선, 커스텀 오버레이를 지도에서 제거합니다
 +
function removeCircles() {
 +
    for (var i = 0; i < circles.length; i++) {
 +
        circles[i].circle.setMap(null);
 +
        circles[i].polyline.setMap(null);
 +
        circles[i].overlay.setMap(null);
 +
    }
 +
    circles = [];
 +
}
 +
 +
// 마우스 우클릭 하여 원 그리기가 종료됐을 때 호출하여
 +
// 그려진 원의 반경 정보와 반경에 대한 도보, 자전거 시간을 계산하여
 +
// HTML Content를 만들어 리턴하는 함수입니다
 +
function getTimeHTML(distance) {
 +
 +
    // 도보의 시속은 평균 4km/h 이고 도보의 분속은 67m/min입니다
 +
    var walkkTime = distance / 67 | 0;
 +
    var walkHour = '', walkMin = '';
 +
 +
    // 계산한 도보 시간이 60분 보다 크면 시간으로 표시합니다
 +
    if (walkkTime > 60) {
 +
        walkHour = '<span class="number">' + Math.floor(walkkTime / 60) + '</span>시간 '
 +
    }
 +
    walkMin = '<span class="number">' + walkkTime % 60 + '</span>분'
 +
 +
    // 자전거의 평균 시속은 16km/h 이고 이것을 기준으로 자전거의 분속은 267m/min입니다
 +
    var bycicleTime = distance / 227 | 0;
 +
    var bycicleHour = '', bycicleMin = '';
 +
 +
    // 계산한 자전거 시간이 60분 보다 크면 시간으로 표출합니다
 +
    if (bycicleTime > 60) {
 +
        bycicleHour = '<span class="number">' + Math.floor(bycicleTime / 60) + '</span>시간 '
 +
    }
 +
    bycicleMin = '<span class="number">' + bycicleTime % 60 + '</span>분'
 +
 +
    // 거리와 도보 시간, 자전거 시간을 가지고 HTML Content를 만들어 리턴합니다
 +
    var content = '<ul class="info">';
 +
    content += '    <li>';
 +
    content += '        <span class="label">총거리</span><span class="number">' + distance + '</span>m';
 +
    content += '    </li>';
 +
    content += '    <li>';
 +
    content += '        <span class="label">도보</span>' + walkHour + walkMin;
 +
    content += '    </li>';
 +
    content += '    <li>';
 +
    content += '        <span class="label">자전거</span>' + bycicleHour + bycicleMin;
 +
    content += '    </li>';
 +
    content += '</ul>'
 +
 +
    return content;
 +
}
 +
 +
</script>
 +
</body>
 +
</html>

2019년 8월 12일 (월) 12:01 판

  • 54기의 태실 지도 보기

앙

서삼릉 태실


지도를 마우스로 클릭하면 원 그리기가 시작되고 오른쪽 마우스를 클릭하면 원 그리기가 종료됩니다
마커에 마우스 커서를 올리면 마커의 타이틀이 표시됩니다

원본 주소 "http://dh.aks.ac.kr/seosamneung/index.php?title=대문&oldid=3"