|
|
| (같은 사용자의 중간 판 3개는 보이지 않습니다) |
| 1번째 줄: |
1번째 줄: |
| − | *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>
| |
