23.07.13 86일차
Spring
- 지도 api
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<c:import url="/include/top.jsp"/>
<section>
<br>
<div align="center">
<h2> 전국 전문대학교 분포도 ( 주소를 이용한 마커 표시하기 ) </h2>
<hr width=80%>
<div id="map" style="width:70%;height:450px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=${key}&libraries=services"></script>
<script type="text/javascript" >
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
//center: new kakao.maps.LatLng(36.5498747, 127.9260111), // 지도의 중심좌표
//level: 12 // 지도의 확대 레벨
center: new kakao.maps.LatLng(37.594371, 126.923464), // 지도의 중심좌표
level: 4 // 지도의 확대 레벨
};
// 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
var idx = new Array();
var csNm = new Array();
var addr = new Array();
<c:forEach var="k" items="${li}">
idx.push("${k.idx}");
csNm.push("${k.csNm}");
addr.push("${k.addr}");
</c:forEach>
var positions = [];
for (i=0 ; i <= csNm.length ; i++ ){
positions[i] = {
idx : idx[i],
csNm : csNm[i],
addr : addr[i]
};
}
positions.forEach(function (k) { //추가한 코드
// 주소로 좌표를 검색합니다
geocoder.addressSearch(k.addr, function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
// 결과값으로 받은 위치를 마커로 표시합니다
var marker = new kakao.maps.Marker({
map: map,
position: coords,
});
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content: '<div style="width:150px;text-align:center;padding:6px 0;">' + k.csNm + '<br>'
+ '<a href="${path}/EvEdit.do?idx='+ k.idx +'" style="color:blue">기업상세보기</a></div>',
removable : true
});
// 마커에 클릭이벤트를 등록합니다
kakao.maps.event.addListener(marker, 'click', function() {
// 마커 위에 인포윈도우를 표시합니다
infowindow.open(map, marker);
});
}
});
});
</script>
</div>
<br><br>
</section>
<%@ include file ="/include/footer.jsp" %>카카오 지도 OpenAPI를 받아와 적용해보았다.
지도에서 각 위치마다 마커를 발생시키고 링크를 적용하여
상세보기 화면으로 이동되도록했다.
- 상세보기 지도
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<c:import url="/include/top.jsp"/>
<section>
<br>
<div align="center"><h2>충전소 상세보기 ${m.idx }</h2></div>
<br>
<table border=1 width=600 align="center">
<tr>
<td colspan=2>
<div id="map" style="width:100%;height:450px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=${key}&libraries=services"></script>
<script type="text/javascript" >
var csNm = "${m.csNm}";
var addr = "${m.addr}";
// 넘어온 값 확인
// alert("csNm : " + csNm + " addr : " + addr)
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
//center: new kakao.maps.LatLng(36.5498747, 127.9260111), // 지도의 중심좌표
//level: 12 // 지도의 확대 레벨
center: new kakao.maps.LatLng(37.594371, 126.923464), // 지도의 중심좌표
level: 4 // 지도의 확대 레벨
};
// 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
var positions= [{
csNm : csNm,
addr : addr
}];
positions.forEach(function (k) { //추가한 코드
// 주소로 좌표를 검색합니다
geocoder.addressSearch(addr, function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
// 좌표값 리턴 확인
//alert(result[0].y + " : " + result[0].x)
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
// 결과값으로 받은 위치를 마커로 표시합니다
var marker = new kakao.maps.Marker({
map: map,
position: coords,
});
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content: '<div style="width:150px;text-align:center;padding:6px 0;">' + csNm + '</div>',
removable : true
});
// 마커에 클릭이벤트를 등록합니다
kakao.maps.event.addListener(marker, 'click', function() {
// 마커 위에 인포윈도우를 표시합니다
infowindow.open(map, marker);
});
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
map.setCenter(coords);
}
});
});
</script>
</td>
<tr>
<td align="center" style="font-weight: bold;" width=70>충전소명</td>
<td><input type="text" name=csNm value="${m.csNm}" size="50%"></td>
<tr>
<td align="center" style="font-weight: bold;" width=170>주소</td>
<td><input type="text" name=addr value="${m.addr}" size="50%"></td>
<tr>
<td align="center" style="font-weight: bold;" width=200>종류</td>
<td><input type="text" name=cpStat value="${m.cpStat}" size="50%"></td>
<tr>
<td align="center" style="font-weight: bold;" width=280>충전속도</td>
<td><input type="text" name=cpNm value="${m.cpNm}" size="50%"></td>
</tr>
</table>
<br><br>
</section>
<%@ include file ="/include/footer.jsp" %>
<c:import url="/include/footer.jsp"/>상세보기로 넘어온 지도의 값을 받아 해당 마커의 위치가 정중앙에 위치하도록 하고,
위치에 마커를 표시한 뒤 , 넘어온 값을 테이블에 작성해두었다.
OpenAPI를 사용하며 어떤 부분에서 어떤 동작이 이루어지는지를 알아두는것이 중요하다고 생각된다.
아직 코드를 익숙하게 다루지 못하지만 많은 경험이 실력이 될테니 많은 API를 사용해 보도록 해야겠다.
- 상품의 이미지 불러오기
DB의 칼럼명과 실제 데이터를 받는 VO에서의 이름이 다를경우
Mapping에서 쿼리문을 입력할 때 칼럼을 별칭지어 VO와 맞게 해주어야
저장한 폴더에서 파일명을 받아와 동작이 가능하다.
칼럼과 VO명칭이 다를때 별칭선언
<resultMap type="pd" id="pdResult">
<id property="productId" column="productId"/>
<result property="productId" column="productId"/>
<result property="productName" column="productName"/>
<result property="productPrice" column="productPrice"/>
<result property="productDesc" column="productDesc"/>
<result property="productImgStr" column="productImg"/>
<result property="productDate" column="productDate"/>
</resultMap>이미지 파일을 폴더에 저장하려면 VO에서 MultipartFile형으로 선언하고 String으로 파일명을 받아오기 때문에 String형으로 받아와야 View에서 값을 받아 확인할 수 있다.
따라서 쿼리문 또는 컨트롤러에서 변수 이름이 같은지 다시한번 확인하고 같은 이슈가 발생하지 않도록 하고, 만약 동일한 이슈가 발생한다면 빠르게 조치할 수 있도록 하자.
Back-end Developer Preparation Students