ÃֽŠ°Ô½Ã±Û(JAVA)
2019.05.29 / 24:20
´ÙÀ½ ¸Ê API(Ä«Ä«¿À ¸Ê) ¶óÀÎ ±×¸®±â, ¶óÀÎ °Å¸® ±¸Çϱâ
Źµ¹ÀÌ°³¹ßÀÚ
Ãßõ ¼ö 206
´ÙÀ½ ¸Ê API¿¡ »ùÇÃÀ» º¸¸é ¿©·¯ »óȲ¿¡ ¸Â´Â »ç¿ë¹ýµéÀÌ ÄÚµå·Î Ä£ÀýÇÏ°Ô ¿Ã¶ó¿Í ÀÖ´õ±º¿ä
ÇÏÁö¸¸ ¸¶Ä¿³¢¸® ¼±À» ÀÕ°í °Å¸®¸¦ ±¸ÇÏ´Â ¹æ¹ýÀÌ ¾ø¾ú¾î¿ä
»ùÇà + Docs Âü°íÇؼ ¿ä¸®Á¶¸® ³¢¿ö¸ÂÃß¸é µÇ±ä Çϴµ¥, óÀ½ ´Ù·ïº¸´Ï±ñ À̰ŵµ ¿À·¡°É¸®´õ±º¿ä
±×·¡¼ ¿Ã·Áµ×´Ù°¡ ¶Ç ½á¸ÔÀ¸·Á°í ¿Ã¸³´Ï´Ù
Áöµµ¿¡ ¸¶Ä¿³¢¸® ¼±À» ÀÕ°í °Å¸®¸¦ ±¸Çغ¸ÀÚ (with Ä«Ä«¿À ¸Ê or ´ÙÀ½ ¸Ê)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | <script> var mapContainer = document.getElementById('map'), // Áöµµ¸¦ Ç¥½ÃÇÒ div mapOption = { center : new daum.maps.LatLng(33.450701, 126.570667), // ÁöµµÀÇ Áß½ÉÁÂÇ¥ level : 5 // ÁöµµÀÇ È®´ë ·¹º§ }; var map = new daum.maps.Map(mapContainer, mapOption); // Áöµµ¸¦ »ý¼ºÇÕ´Ï´Ù var distanceOverlay; // ¼±ÀÇ °Å¸®Á¤º¸¸¦ Ç¥½ÃÇÒ Ä¿½ºÅÒ¿À¹ö·¹ÀÌ ÀÔ´Ï´Ù var dots = {}; // ¼±ÀÌ ±×·ÁÁö°í ÀÖÀ»¶§ Ŭ¸¯ÇÒ ¶§¸¶´Ù Ŭ¸¯ ÁöÁ¡°ú °Å¸®¸¦ Ç¥½ÃÇÏ´Â Ä¿½ºÅÒ ¿À¹ö·¹ÀÌ ¹è¿ÀÔ´Ï´Ù. // ¸¶Ä¿¸¦ Ç¥½ÃÇÒ À§Ä¡¿Í title °´Ã¼ ¹è¿ÀÔ´Ï´Ù var positions = [ { title : "Ä«Ä«¿À", latlng : new daum.maps.LatLng(33.450705, 126.570677) }, { title : "Á¦ÁÖ°øÇ×", latlng : new daum.maps.LatLng(33.5066211, 126.492810) }, { title : "Å׸¶ÆÄÅ©", latlng : new daum.maps.LatLng(33.2906595, 126.322529) }, { title : "¼ö¸ñ¿ø", latlng : new daum.maps.LatLng(33.4696849, 126.493305) } ]; // ¸¶Ä¿ À̹ÌÁöÀÇ À̹ÌÁö ÁÖ¼ÒÀÔ´Ï´Ù var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png"; for (var i = 0; i < positions.length; i++) { // ¸¶Ä¿ À̹ÌÁöÀÇ À̹ÌÁö Å©±â ÀÔ´Ï´Ù var imageSize = new daum.maps.Size(24, 35); // ¸¶Ä¿ À̹ÌÁö¸¦ »ý¼ºÇÕ´Ï´Ù 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 linePath; var lineLine = new daum.maps.Polyline(); var distance; for (var i = 0; i < positions.length; i++) { if (i != 0) { linePath = [ positions[i - 1].latlng, positions[i].latlng ] //¶óÀÎÀ» ±×¸®·Á¸é µÎ Á¡ÀÌ ÀÖ¾î¾ßÇϴϱñ µÎ Á¡À» ÁöÁ¤Çß½À´Ï´Ù } ; lineLine.setPath(linePath); // ¼±À» ±×¸± ¶óÀÎÀ» ¼¼ÆÃÇÕ´Ï´Ù var drawLine = new daum.maps.Polyline({ map : map, // ¼±À» Ç¥½ÃÇÒ ÁöµµÀÔ´Ï´Ù path : linePath, strokeWeight : 3, // ¼±ÀÇ µÎ²²ÀÔ´Ï´Ù strokeColor : '#db4040', // ¼±ÀÇ »ö±òÀÔ´Ï´Ù strokeOpacity : 1, // ¼±ÀÇ ºÒÅõ¸íµµÀÔ´Ï´Ù 0¿¡¼ 1 »çÀÌ°ªÀ̸ç 0¿¡ °¡±î¿ï¼ö·Ï Åõ¸íÇÕ´Ï´Ù strokeStyle : 'solid' // ¼±ÀÇ ½ºÅ¸ÀÏÀÔ´Ï´Ù }); distance = Math.round(lineLine.getLength()); displayCircleDot(positions[i].latlng, distance); } function displayCircleDot(position, distance) { if (distance > 0) { // Ŭ¸¯ÇÑ ÁöÁ¡±îÁöÀÇ ±×·ÁÁø ¼±ÀÇ ÃÑ °Å¸®¸¦ Ç¥½ÃÇÒ Ä¿½ºÅÒ ¿À¹ö·¹À̸¦ »ý¼ºÇÕ´Ï´Ù var distanceOverlay = new daum.maps.CustomOverlay( { content : '<div class="dotOverlay">°Å¸® <span class="number">' + distance + '</span>m</div>', position : position, yAnchor : 1, zIndex : 2 }); // Áöµµ¿¡ Ç¥½ÃÇÕ´Ï´Ù distanceOverlay.setMap(map); } } </script> | cs |
°á°ú¹°
±×³É ¼±À» ¿¬°áÇϽǰŸé '¿©·¯°³ ¸¶Ä¿ Ç¥½ÃÇϱâ'¿Í '¼± Ç¥½ÃÇϱâ'¸¦ ÇÕÄ¡½Ã¸é µË´Ï´Ù
ÇÏÁö¸¸ ÀÌ·¸°Ô ÇÏ¸é ¸ðµç ¸¶Ä¿µéÀÇ ¼±ÀÌ À̾îÁ®¼ °Å¸®µµ ÃÑ ±æÀÌ°¡ ³ª¿À´õ¶ó±¸¿ä
Á¦°¡ ÇÊ¿äÇß´ø°Ç ¸¶Ä¿ °£ÀÇ °Å¸®¿©¼ setPath¸¦ È°¿ëÇØ ÇÊ¿äÇÑ ¶óÀθ¸ »Ì¾Æ¼ °Å¸®¸¦ ±¸ÇÒ ¼ö ÀÖ¾ú½À´Ï´Ù