ehiehi
61
2020-04-08 10:03:45 작성 2020-04-08 10:05:42 수정됨
7
378

카카오맵api구현중 스크립트 질문입니다


카카오맵 api를 통해 db에있는 각 vo를 마커에 정보를 넣어서 각 주소마다 마커를 찍고싶은데 그냥 마커는  스크립트로 배열에 넣어서 표시가 가능한데 정보들은 배열에 안담기더라고요... 어떻게하면 각 정보를 배열에 담아서 마커에 표시할수 있을까요?



<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<html>
<head>
<title>관리자</title>
<script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- 부가적인 테마 -->
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	
<style>
body {
	font-family: '맑은 고딕', verdana;
	padding-bottom: 70px;
	margin: 0;
}

header#header {
	font-size: 20px;
	padding: 5px 0;
}

header#header a {
	color: #000;
	font-weight: bold;
	font-size: 14px;
	text-align: right
}

header#header img {
	width: 40px;
	height: 44px;
	margin-left: 10px;
	margin-bottom: 3px;
}

header#header .title {
	border-bottom: 1px solid gray;
}

#footer {
	background: #f9f9f9;
	padding: 8px;
}

#footer ul li {
	display: inline-block;
	margin-right: 10px;
}
</style>
<!-- 카카오맵 css -->
<style>
    .wrap {position: absolute;left: 0;bottom: 40px;width: 288px;height: 132px;margin-left: -144px;text-align: left;overflow: hidden;font-size: 12px;font-family: 'Malgun Gothic', dotum, '돋움', sans-serif;line-height: 1.5;}
    .wrap * {padding: 0;margin: 0;}
    .wrap .info {width: 286px;height: 120px;border-radius: 5px;border-bottom: 2px solid #ccc;border-right: 1px solid #ccc;overflow: hidden;background: #fff;}
    .wrap .info:nth-child(1) {border: 0;box-shadow: 0px 1px 2px #888;}
    .info .title {padding: 5px 0 0 10px;height: 30px;background: #eee;border-bottom: 1px solid #ddd;font-size: 18px;font-weight: bold;}
    .info .close {position: absolute;top: 10px;right: 10px;color: #888;width: 17px;height: 17px;background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/overlay_close.png');}
    .info .close:hover {cursor: pointer;}
    .info .body {position: relative;overflow: hidden;}
    .info .desc {position: relative;margin: 13px 0 0 90px;height: 75px;}
    .desc .ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
    .desc .jibun {font-size: 11px;color: #888;margin-top: -2px;}
    .info .img {position: absolute;top: 6px;left: 5px;width: 73px;height: 71px;border: 1px solid #ddd;color: #888;overflow: hidden;}
    .info:after {content: '';position: absolute;margin-left: -12px;left: 50%;bottom: 0;width: 22px;height: 12px;background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png')}
    .info .link {color: #5085BB;}
</style>
<meta charset="UTF-8">
<title>Main</title>
</head>
<body>

	<header id="header">
		<div id="header_box">
			<%@include file="../include/header.jsp"%>
		</div>
	</header>

	<div id="main" class="container-fluid">
		<div id="map" style="width:800px;height:800px;"></div>
		<c:forEach var="list" items="${list}">
			<input type="hidden" value="${list.r_address1}" name="address" class="addr">
			<input type="text" value="${list.r_kind}" name="kind" class="kind">
			<input type="text" value="${list.r_price}" name="price" class="price">
			<input type="text" value="${list.r_area}" name="area" class="area">
			 <input type="text" value="${list.r_species}" name="species" class="species">
		</c:forEach>
		
		
		
		<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=24cb38fdf6754a74592c8ec4b53a52c9&libraries=services,clusterer,drawing"></script>
		<script type="text/javascript">

			var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
			var options = { //지도를 생성할 때 필요한 기본 옵션
				center: new kakao.maps.LatLng(37.5666805, 126.9784147), //지도의 중심좌표.
				level: 6 //지도의 레벨(확대, 축소 정도) 
			};
			var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
			// 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다
			var mapTypeControl = new kakao.maps.MapTypeControl();

			// 지도에 컨트롤을 추가해야 지도위에 표시됩니다
			// kakao.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
			map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);

			// 지도 확대 축소를 제어할 수 있는  줌 컨트롤을 생성합니다
			var zoomControl = new kakao.maps.ZoomControl();
			map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
		
			var addressArray = [];
			var addrlist = $('.addr');
			var PriceArray = [];
			var list = $('.addr');
			var Array = [];
			var list = $('.addr');
			var Array = [];
			var list = $('.addr');
		
			
			for (var i = 0; i < addrlist.length; i++) {
				addressArray.push({
					'groupAddress' : $("input[name='address']").eq(i).val(),							
					'groupPrice' : $("input[name='price']").eq(i).val(),				
					'groupArea' : $("input[name='area']").eq(i).val(),				
					'groupSpecies' : $("input[name='species']").eq(i).val()
				});
			}
			
			// 주소-좌표 변환 객체를 생성합니다
			var geocoder = new kakao.maps.services.Geocoder();
			for (var i = 0; i < addressArray.length; i++) {
				var iwContent  = '<div style="padding:5px;">'+addressArray[i].groupPrice+'만원'+
		    	addressArray[i].groupArea+
		    	addressArray[i].groupSpecies+
		    	'</div>';
				geocoder.addressSearch(
						addressArray[i].groupAddress,
						function(result, status, data) {
							// 정상적으로 검색이 완료됐으면 
						     if (status === kakao.maps.services.Status.OK) {
								
						    	//마커를 표시할 위치
						        var position = new kakao.maps.LatLng(result[0].y, result[0].x);
								
						        var marker = new kakao.maps.Marker({
						            position: position,
						            clickable: true	
						        });
						        
 								marker.setMap(map);
 								
 								var iwRemoveable = true;
 								
 								// 인포윈도우를 생성하고 지도에 표시합니다
 								var infowindow = new kakao.maps.InfoWindow({
 								    content : iwContent,
 								    removable : iwRemoveable
 								});
 								
 							// 마커에 클릭이벤트를 등록합니다
 								kakao.maps.event.addListener(marker, 'click', function() {
 								      // 마커 위에 인포윈도우를 표시합니다
 								      infowindow.open(map, marker);  
 								});
						      
							}
						});
				
			
			}
		</script>
	
	</div>

	<footer>
		<div id="footer" class=" navbar-fixed-bottom">
			<%@include file="../include/footer.jsp"%>
		</div>
	</footer>

</body>
</html>
0
  • 답변 7

  • 관짝
    616
    2020-04-08 10:40:48 작성 2020-04-08 11:06:08 수정됨

    엥ㅋㅋㅋ죄송합니다 코드를 제대로 안읽었네요

    addressArray에 값이 안 담긴다는 말씀이신가요?

    아니면 iwContent에 값을 저장하는데에 문제가 있으신건가요?

  • ehiehi
    61
    2020-04-08 14:43:10

    iwContent에 저장하는데 문제가있습니다

    가격정보같은 정보들을 vo에서 리스트형식으로 가져와서 인포윈도우로 출력하려고하는데

    addressArray.groupPrice에는 같은값만 나와서요.;;;ㅜ

  • 관짝
    616
    2020-04-08 16:21:28

    iwContent와 addressArray를 모두 var가 아닌 let으로 선언해보시겠어요?

  • 관짝
    616
    2020-04-08 16:23:40

    그리고 조금 궁금한게

    for (var i = 0; i < addrlist.length; i++) {
    				//이부분
    			}

    에서 

    geocoder.addressSearch(
    						addressArray[i].groupAddress,
    						function(result, status, data) {
    							// 정상적으로 검색이 완료됐으면 
    						     if (status === kakao.maps.services.Status.OK) {
    								
    						    	//마커를 표시할 위치
    						        var position = new kakao.maps.LatLng(result[0].y, result[0].x);
    								
    						        var marker = new kakao.maps.Marker({
    						            position: position,
    						            clickable: true	
    						        });
    						        
     								marker.setMap(map);
     								
     								var iwRemoveable = true;
     								
     								// 인포윈도우를 생성하고 지도에 표시합니다
     								var infowindow = new kakao.maps.InfoWindow({
     								    content : iwContent,
     								    removable : iwRemoveable
     								});
     								
     							// 마커에 클릭이벤트를 등록합니다
     								kakao.maps.event.addListener(marker, 'click', function() {
     								      // 마커 위에 인포윈도우를 표시합니다
     								      infowindow.open(map, marker);  
     								});
    						      
    							}
    						});

    를 바로 실행하면 안되는 이유가 있나요? 굳이 리스트에 담겨있는걸 또 리스트에 담으시길래.. 또 다른 곳에서 사용을 하는건가요?

  • ehiehi
    61
    2020-04-08 17:09:19
    아 됬습니당 ㅜㅜㅜ 정말감사합니다 그 말씀하신 배열은 다른곳에서 사용안합니다..지웠습니다... 답변 정말 감사합니다!!
  • 관짝
    616
    2020-04-08 18:24:34

    시간이 되시면 var, let, const의 차이점에 대해서 검색해보시면 좋을 것 같아요 ㅎㅎ

    각각 선언, 할당에 대한 차이점이 있어서 스크립트작업할 때 알아두면 좋거든요~

  • ehiehi
    61
    2020-04-08 20:15:08

    세심한 조언까지 감사합니다!

  • 로그인을 하시면 답변 을 등록할 수 있습니다.