개발/자바스크립트 및 프론트

(자바스크립트) 카카오 맵 연동하기

kakk789 2022. 6. 27. 09:06

카카오 디벨로퍼 (지도 API 이용해보기)

1. 카카오 디벨로퍼 홈페이지로 가서 개발자 등록

https://developers.kakao.com/

2. 애플리케이션 추가하기

3. 키 값 반환 됨

4. 플랫폼 설정 (Web)

5. 카카오맵 API 사용

https://apis.map.kakao.com/

더보기

카카오 맵 연동 JavaScript 

  • 페이징 처리 완료
  • 해당 테이블 tr클릭 시 Marker 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	span{
		display: inline-block;
		margin: 5px;
		cursor: pointer;
	}
</style>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=API 키값"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	/*야영(캠핑)장명: "오션파크"
	소재지도로명주소: "충청남도 태안군 남면 몽산포길 161"
	위도: "36.6744920527"
	경도: "126.2808663915"*/

$(function(){
	mapContainer = document.getElementById('map'); // 지도를 표시할 div 
	mapOption = { 
        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
	};
	map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다	
	
	
	var arr;
	
	var totalRecords=1;		//전체레코드 수
	var totalPage=1;		//전체페이지 수	
	var pageSize=10;		//한화면에 보여줄 레코드 수 
	var pageGroup = 10;		//한화면에 보여줄 페이지 수
	
	
	$.ajax({
		url:"전국야영(캠핑)장표준데이터.json",
		success:function(data){
			
			//data = {'field':[], 'records':[]}
			arr = data['records'];	
			console.log("전체데이터수:"+arr.length)
			totalRecords = arr.length;
			totalPage =  Math.ceil( totalRecords/pageSize );	

			//초기화 값으로 1페이지를 먼저 보여줌
			printPage(1); // 단일 페이지 당 보여 줄 레코드를 10개 출력
			printPageNumber(1); //1~10, 11~20 페이지번호를 출력하는 것(10개 출력)
		}
	});	
	
	 // 단일 페이지 당 보여 줄 레코드를 10개 출력
	function printPage(pageNUM){ //매개변수로 페이지 번호를 전달 받음
		$("#list").empty(); //이전에 내용을 모두 지움
		var start = (pageNUM-1)*pageSize + 1; //페이지의 시작 레코드
		var end = start + pageSize -1; //페이지의 마지막 레코드
		
		if(end > totalRecords){
			end = totalRecords;
		}
		console.log("start ", start);
		console.log("end ", end);
		
		for(var i=start-1; i<end; i++){ 
			var row = arr[i]; //야영장의 정보를 담은 객체
			var tr = $("<tr></tr>");
			
			//미래에 만들어 질 노드를 위하여 item이라는 Class이름을 붙였음
			$(tr).addClass("item");
			
// 			$(tr).attr("lat", row['위도']);
// 			$(tr).attr("lng", row['경도']);
			$(tr).attr({
				lat:row['위도'],
				lng:row['경도']
			});
			
			$(tr).append( $("<td></td>").html(  row['야영(캠핑)장명'] ) );
			$(tr).append( $("<td></td>").html(  row['소재지도로명주소'] ) );
			$(tr).append( $("<td></td>").html(  row['위도'] ) );
			$(tr).append( $("<td></td>").html(  row['경도'] ) );
			$("#list").append(tr);
			console.log(row);
		}
	}//end pringPage
	
	
	//한화면에 10개의 페이지번호를 출력하고 싶어요
	//만약에 현재페이지가 1,2,3,4,5,6,7,8,9,10,  ==> 시작페이지는 1, 마지막페이지는 10
	//~~~~           11,12,13,14,15,16,17,18,19,20  ==> 시작페이지는 11 마지막페이지는 20
	
	function printPageNumber(pageNUM){
		$("#pageing").empty();
		
		var startPage = Math.floor((pageNUM-1)/pageGroup) * pageGroup  + 1 ; 	
		var endPage = startPage + pageGroup - 1;
		
// 		console.log(pageNUM % pageGroup);
		
		if(endPage > totalPage){
			endPage = totalPage;
		}
		
		//맨 앞으로
		if(startPage!=1){
			var span = $("<span></span>").html("[맨 앞으로]");
			$(span).attr("page", 1);
			$("#pageing").append(span);
		}
		
		if(startPage > 1){
			var span = $("<span></span>").html("[이전]");
			$(span).attr("page",startPage - 1);
			$("#pageing").append(span);
		}
		
		for(i = startPage; i<=endPage ; i++){
			var span = $("<span></span>").html(i);
			$(span).attr("page",i);
			$("#pageing").append(span);					
		}
		
		//전체 totalpage 인 223 보다 현재 endPage가 작으면 다음 페이지가 있어야함
		if(endPage < totalPage){
			
			var span = $("<span></span>").html("[다음]");
			
			$(span).attr("page",endPage+1);
			$("#pageing").append(span);
		}
		
		//맨 끝으로
		//맨 마지막 페이지 그룹에 출력할 시작 페이지와 마지막 페이지를 구해야함.
		if(endPage < totalPage){
			
			var span = $("<span></span>").html("[맨 끝으로]");
			$(span).attr("page", totalPage);
			$("#pageing").append(span);
		}
	}
	
	$(document).on("click", "span", function(){
		var page = $(this).attr("page");
		printPage(page);
		printPageNumber(page);
	});
	
	$(document).on("click",".item", function(){
		var lat = Number( $(this).attr("lat"));
		var lng = Number( $(this).attr("lng"));
		
		newLatLng = new kakao.maps.LatLng(lat, lng);
		map.panTo(newLatLng);
		
		// 마커를 생성합니다
		var marker = new kakao.maps.Marker({
		    position: newLatLng
		});

		// 마커가 지도 위에 표시되도록 설정합니다
		marker.setMap(map);
	});
})

</script>
</head>
<body>
	<div id="pageing"></div>
	<table border="1" width="80%">
		<thead>
			<tr>
				<th>캠핑장명</th>
				<th>주소</th>				
				<th>위도</th>				
				<th>경도</th>				
			</tr>
		</thead>
		<tbody id="list">		
		</tbody>
	</table>
	<hr>
	<div id="map" style="width:100%;height:350px;"></div>
</body>
</html>

 

반응형
저작자표시 (새창열림)