Showing
1 changed file
with
64 additions
and
63 deletions
| ... | @@ -17,71 +17,72 @@ | ... | @@ -17,71 +17,72 @@ |
| 17 | 17 | ||
| 18 | <div id="map" style="width:700px;height:400px;"></div> | 18 | <div id="map" style="width:700px;height:400px;"></div> |
| 19 | <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988&libraries=services"></script> | 19 | <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988&libraries=services"></script> |
| 20 | - | ||
| 21 | - <script> | ||
| 22 | - var mapContainer = document.getElementById('map'), // 지도를 표시할 div | ||
| 23 | - mapOption = { | ||
| 24 | - center: new kakao.maps.LatLng(37.596672, 127.051950), // 지도의 중심좌표 | ||
| 25 | - level: 3 // 지도의 확대 레벨 | ||
| 26 | - }; | ||
| 27 | - | ||
| 28 | - var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다 | ||
| 29 | - var geocoder = new kakao.maps.services.Geocoder(); | ||
| 30 | - // 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다 | ||
| 31 | - var zoomControl = new kakao.maps.ZoomControl(); | ||
| 32 | - map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT); | ||
| 33 | 20 | ||
| 34 | - var listData = "<%= result %>"; | 21 | + <%if(typeof(result) != "undefined"){%> |
| 35 | - listData = listData.replaceAll('"','\"'); | 22 | + <script> |
| 36 | - listData = JSON.parse(listData); | 23 | + var mapContainer = document.getElementById('map'), // 지도를 표시할 div |
| 24 | + mapOption = { | ||
| 25 | + center: new kakao.maps.LatLng(37.596672, 127.051950), // 지도의 중심좌표 | ||
| 26 | + level: 3 // 지도의 확대 레벨 | ||
| 27 | + }; | ||
| 28 | + | ||
| 29 | + var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다 | ||
| 30 | + var geocoder = new kakao.maps.services.Geocoder(); | ||
| 31 | + // 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다 | ||
| 32 | + var zoomControl = new kakao.maps.ZoomControl(); | ||
| 33 | + map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT); | ||
| 37 | 34 | ||
| 38 | - console.log(listData); | 35 | + var listData = "<%= result %>"; |
| 39 | - // console.log(listData[1]); | 36 | + |
| 40 | - //입력되는 배열명이 listData로 들어오면 됨. | 37 | + listData = listData.replaceAll('"','\"'); |
| 41 | - listData.forEach(function(addr, index) { | 38 | + listData = JSON.parse(listData); |
| 42 | - var tmpaddr = ((addr.orgZipaddr).split(','))[0]; | ||
| 43 | - console.log(tmpaddr); | ||
| 44 | - console.log("h"); | ||
| 45 | - geocoder.addressSearch(tmpaddr, function(result, status) { | ||
| 46 | - if (status === kakao.maps.services.Status.OK) { | ||
| 47 | - var coords = new kakao.maps.LatLng(result[0].y, result[0].x); | ||
| 48 | - | ||
| 49 | - var marker = new kakao.maps.Marker({ | ||
| 50 | - position: coords, | ||
| 51 | - clickable: true}); | ||
| 52 | - | ||
| 53 | - // 마커를 지도에 표시합니다. | ||
| 54 | - marker.setMap(map); | ||
| 55 | - | ||
| 56 | - // 인포윈도우를 생성합니다 | ||
| 57 | - var infowindow = new kakao.maps.InfoWindow({ | ||
| 58 | - content: '<div style="width:150px;text-align:center;padding:6px 0;">' + addr[1] + '</div>', | ||
| 59 | - removable : true | ||
| 60 | - }); | ||
| 61 | - // 마커에 클릭이벤트를 등록합니다 | ||
| 62 | - kakao.maps.event.addListener(marker, 'click', function() { | ||
| 63 | - // 마커 위에 인포윈도우를 표시합니다 | ||
| 64 | - infowindow.open(map, marker); | ||
| 65 | - }); | ||
| 66 | - } | ||
| 67 | - }); | ||
| 68 | - | ||
| 69 | - }); | ||
| 70 | - | ||
| 71 | - // 인포윈도우를 표시하는 클로저를 만드는 함수입니다 | ||
| 72 | - function makeOverListener(map, marker, infowindow) { | ||
| 73 | - return function() { | ||
| 74 | - infowindow.open(map, marker); | ||
| 75 | - }; | ||
| 76 | - } | ||
| 77 | - | ||
| 78 | - // 인포윈도우를 닫는 클로저를 만드는 함수입니다 | ||
| 79 | - function makeOutListener(infowindow) { | ||
| 80 | - return function() { | ||
| 81 | - infowindow.close(); | ||
| 82 | - }; | ||
| 83 | - } | ||
| 84 | - </script> | ||
| 85 | 39 | ||
| 40 | + console.log(listData); | ||
| 41 | + // console.log(listData[1]); | ||
| 42 | + //입력되는 배열명이 listData로 들어오면 됨. | ||
| 43 | + listData.forEach(function(addr, index) { | ||
| 44 | + var tmpaddr = ((addr.orgZipaddr).split(','))[0]; | ||
| 45 | + console.log(tmpaddr); | ||
| 46 | + geocoder.addressSearch(tmpaddr, function(result, status) { | ||
| 47 | + if (status === kakao.maps.services.Status.OK) { | ||
| 48 | + var coords = new kakao.maps.LatLng(result[0].y, result[0].x); | ||
| 49 | + | ||
| 50 | + var marker = new kakao.maps.Marker({ | ||
| 51 | + position: coords, | ||
| 52 | + clickable: true}); | ||
| 53 | + | ||
| 54 | + // 마커를 지도에 표시합니다. | ||
| 55 | + marker.setMap(map); | ||
| 56 | + | ||
| 57 | + // 인포윈도우를 생성합니다 | ||
| 58 | + var infowindow = new kakao.maps.InfoWindow({ | ||
| 59 | + content: '<div style="width:150px;text-align:center;padding:6px 0;">' + addr[1] + '</div>', | ||
| 60 | + removable : true | ||
| 61 | + }); | ||
| 62 | + // 마커에 클릭이벤트를 등록합니다 | ||
| 63 | + kakao.maps.event.addListener(marker, 'click', function() { | ||
| 64 | + // 마커 위에 인포윈도우를 표시합니다 | ||
| 65 | + infowindow.open(map, marker); | ||
| 66 | + }); | ||
| 67 | + } | ||
| 68 | + }); | ||
| 69 | + | ||
| 70 | + }); | ||
| 71 | + | ||
| 72 | + // 인포윈도우를 표시하는 클로저를 만드는 함수입니다 | ||
| 73 | + function makeOverListener(map, marker, infowindow) { | ||
| 74 | + return function() { | ||
| 75 | + infowindow.open(map, marker); | ||
| 76 | + }; | ||
| 77 | + } | ||
| 78 | + | ||
| 79 | + // 인포윈도우를 닫는 클로저를 만드는 함수입니다 | ||
| 80 | + function makeOutListener(infowindow) { | ||
| 81 | + return function() { | ||
| 82 | + infowindow.close(); | ||
| 83 | + }; | ||
| 84 | + } | ||
| 85 | + </script> | ||
| 86 | + <%}%> | ||
| 86 | </body> | 87 | </body> |
| 87 | </html> | 88 | </html> |
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
-
Please register or login to post a comment