Spring 개발 - BIS(Bus Information System) 만들기(2) - 다음 지도 API 적용 시키기 ─ 개발한 이야기

본 내용은 혼자서 공부하기 위한 용도로 사용된 것으로 비효율적일 수 있으며 실용적이지 않을 수 있습니다.

BIS 시스템을 만들기 위해 중요한 지도 API를 적용하여야 한다. 그러기 위하여 다음 카카오 지도 API를 사용하려고 한다. 다음에서는 개발자 등을 위해 여러 API를 공유해놓았다. 로그인하여 허가를 받아야한다. 앱키는 공유할 수 없으니 각자 로그인하여 앱키를 받기를 바란다. http://apis.map.daum.net/

1. 다음 API 지도 적용하기

먼저 다음API 지도 적용을 위해 다음 스크립트를 불러올 것이다.

webapp/WEB-INF/include/include-header.jspf

<!-- Daum Map API -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=각자의 앱키"></script>

부분을 추가해준다. 해당 부분을 추가해줌으로써 다음 지도 API의 기능을 불러와 사용할 수 있다.

먼저, 해당 지도를 불러올 페이지를 만들자.

main/controller/GCBusController.java

@Controller
public class GCBusController {

	//유저를 위한 컨트롤러
	@RequestMapping(value="/main.do")
	public ModelAndView nodeFind(CommandMap commandMap) throws Exception{
		
		ModelAndView mv = new ModelAndView("node_find");
		mv.addObject("nodeid",commandMap.get("nodeid"));
		mv.addObject("nodename",commandMap.get("nodename"));
		mv.addObject("lat",commandMap.get("lat"));
		mv.addObject("lng",commandMap.get("lng"));
		
		return mv;
	}
}

- 클라이언트의 요청으로 해당 페이지를 보여주기 위한 컨트롤러이다. 다른 페이지에서 해당 페이지로 이동할 때(정류장 클릭으로 인한) 해당 정류장의 정보들을 받아오기 위해 객체의 정보들을 넘겨준다.

WEB-INF/include/include-gnb.jspf

<%@ page pageEncoding="utf-8"%>
<div id="gnb" class="gnb">
	<ul>
		<li class="gnb_menu" id="node_find">
			<a class="" href="<c:url value='/'/>">
				<img src="./image/node_icon.png" alt="" class="gnb_icon"  >
				정류소 찾기
			</a>
		</li>
		<li class="gnb_menu" id="route_info">
			<a class="" href="<c:url value='/routeInfoPage.do'/>">
				<img src="./image/bus_icon.png" alt="" class="gnb_icon"  >
				버스 노선
			</a>
		</li>
		<li class="gnb_menu" id="path_find" >
			<a class="">
				<img src="./image/find_icon.png" alt="" class="gnb_icon"  >
				길찾기<br>(미구현)
			</a>
		</li>
		<li class="gnb_menu" id="board">
			<a class="" href="<c:url value='/openBoardList.do'/>">
				<img src="./image/board_icon.png" alt="" class="gnb_icon"  >
				게시판
			</a>
		</li>
	</ul>
</div>

<script type="text/javascript">
	$(document).ready(function(){
		$(".gnb_menu").on("click",function(e){
			$(".gnb_menu").removeClass("selected");
		})
	})
</script>

먼저 사이드바 구성을 위하여 위의 코드를 추가해준다.

위의 해당 부분을 구성하는 부분이다. 모든 웹페이지에서 불러올 GNB(Global Navigation Bar)로 공통 메뉴 바이다. 특별한 부분은 없다.

다음으로는 위 그림에서의 페이지를 구성하기 위하여 다음과 코드를 작성한다.

WEB-INF/jsp/node_info.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Main</title>
<%@ include file="/WEB-INF/include/include-header.jspf" %>
</head>
<body>
	<%@ include file="/WEB-INF/include/include-gnb.jspf" %>
	
	<div id="body" >
		<div id="searchMenu" class="leftBox">
			<div id="searchBox" class="leftBox" >
				<p class="margin0">위도  <input type="text" id="lat" value="36.12354" style="width:150px; height:20px;"></p>
				<p class="margin0">경도  <input type="text" id="lng" value="128.11828" style="width:150px; height:20px;"></p>
				<input type="hidden" value="${nodeid }" id="nodeidVal" >
				<input type="hidden" value="${nodename }" id="nodenameVal">
				<input type="hidden" value="${lat }" id="latVal">
				<input type="hidden" value="${lng }" id="lngVal">
				<a href="#this" id="sc_btn" class="btn" >찾기</a>
			</div>
		</div>
		<div id="resultBox" class="leftBox">
		</div>
		
		<div id="bodyBox">
			<div id="mapBox" class="mapBox">
			</div>
		</div>
	</div>
	<%@ include file="/WEB-INF/include/include-body.jspf" %>
	<script src="<c:url value='/js/daumAPI/map.js'/>" charset="utf-8"></script>

	<script type="text/javascript">$("#node_find").addClass("selected");</script>

- 13~25라인

검색과 그에 대한 결과값을 보여주는 창을 구성하는 곳이다. <input type="hidden"> 태그들은 나중에 다른 페이지에서 정류소의 현재 값으로 페이지 이동을 하였을때 값을 받아오기 위한 부분이다.

- 27~30라인

해당 부분이 지도를 구성하기 위한 부분이다. css 파일도 따로 첨부해두었기 때문에 아이디와 클래스를 동일하게 해주면 위와 같이 화면이 구성될 것이다.

-33라인

해당 부분은 다음 부분에서 작성할 페이지로 다음 API에 관련된 부분을 작성할 곳이다. 따로 작성하여 해당 jsp파일에서 불러올 것이다.

webapp/js/daumAPI/map.js

var mapContainer = document.getElementById('mapBox'), // 지도를 생성할 div 
mapOption = { 
    center: new daum.maps.LatLng(36.12354, 128.11828), // 지도의 중심좌표
    level: 3 // 지도의 확대레벨
};

var map = new daum.maps.Map(mapContainer, mapOption); // 지도를 생성합니다.

지도를 구성하는 부분으로 지도를 생성할 부분을 지정하고 옵션을 설정해주고 지도를 생성한다.

여기까지 따라왔다면 위와 같은 페이지가 구성될 것이다.

'코딩 > Spring' 카테고리의 다른 글

Spring 개발 - BIS(Bus Information System) 만들기(4) - 공공 API 값 받아오기(xml parser) (0)	2018.10.07
Spring 개발 - BIS(Bus Information System) 만들기(3) - 다음 지도 API(클릭 이벤트) (0)	2018.10.07
Spring 개발 - BIS(Bus Information System) 만들기(1) - 구성 및 주변 구성 (0)	2018.10.06
Spring 개발 - BIS(Bus Information System) 만들기(0) (0)	2018.10.06
Spring 개발 - 게시판 만들기 번외(3) - 회원 기능(로그인) (2)	2018.03.13

'코딩 > Spring' 카테고리의 다른 글

티스토리툴바

티스토리툴바