JSP
JSP(지도 API)_2024-10-01
앵보몬
2024. 10. 2. 11:06
728x90
반응형
카카오 지도 API를 사용하여 지도 정보를 포함한 게시글 작성 기능을 구현했습니다. 지도 검색창에 키워드로 위치 검색 후 나타나는 마커를 클릭하면 지도 아래에 선택된 좌표가 표시됩니다. [저장]버튼 클릭시 게시물 내용과 함께 선택된 좌표가 DB에 저장됩니다.
개발환경 : 서블릿&JSP, 마이바티스, 오라클DB
준비사항 : 게시판 DB, 게시판 모델 DTO
① 카카오 App Key 발급받기
카카오 지도 API 가이드 👉 https://apis.map.kakao.com/web/guide/
② 사용할 지도 샘플 선택
https://apis.map.kakao.com/web/sample/keywordList/
③ JSP페이지에 API 스크립트 삽입
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 사용하세요&libraries=services"></script>발급받은 APP KEY를 사용하세요 부분에 1번에서 발급받은 자바스크립트 앱 키를 넣습니다.
④ 스타일태그 삽입 : 상단에 있는 아주 긴 스타일 태그를 head에 복붙합니다.
⑤ Body 작성
<%
//로그인 정보 얻어오기
MemberDTO dto = (MemberDTO)session.getAttribute("login");
String userid = dto.getUserID();
%>회원가입과 로그인기능이 구현되어있을 경우 로그인 정보를 DB에서 얻어옵니다. 작성자명으로 사용하기 위해 사용자 id를 파싱했습니다.
⑥ Servlet 작성
FreeBoardWriteServlet
// 데이더 파싱
String title = request.getParameter("title");
String userid = request.getParameter("userid");
String content = request.getParameter("content");
String placeLa = request.getParameter("latitude");
String placeMa = request.getParameter("longitude");
String placeName = request.getParameter("placeName");폼에서 넘어온 데이터를 파싱합니다.
// 게시판DTO 타입으로 객체생성
FreeBoardDTO fDTO = new FreeBoardDTO(0, title, userid, content,null, 0, placeName, placeLa, placeMa);미리 만들어둔 게시판 DTO 타입으로 생성자 형식에 맞게 파싱한 데이터를 세팅해줍니다.
// service 객체 생성 후 db insert 처리
FreeBoardService service = new FreeBoardService();
service.insert(fDTO);서비스 객체를 생성하고 세팅된 게시판 dto를 insert로직으로 넘겨줍니다.
// 게시판 목록으로 이동
response.sendRedirect("FreeBoardListServlet");insert 처리 후 게시판 목록으로 페이지를 이동시킵니다.
⑦ 게시글 데이터 insert
// service
public void insert(FreeBoardDTO dto) {
SqlSession session = OracleSqlSessionFactory.getSession();
FreeBoardDAO dao = new FreeBoardDAO();
try {
dao.insert(session, dto);
session.commit();
} catch (Exception e) {
e.printStackTrace();
} finally {
session.close();
}
}
// dao
public void insert(SqlSession session, FreeBoardDTO dto) {
session.insert("FreeBoardMapper.insert", dto);
}
// mybatis Mapper
<insert id="insert" parameterType="FreeBoardDTO">
insert into freeBoard(num, title, userid, content, writeday,
readcnt, placeName, placeLa, placeMa)
values(freeBoard_seq.nextval, #{title}, #{userid}, #{content}, sysdate,
0, #{placeName}, #{placeLa}, #{placeMa})
</insert>
webmap.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>지도 생성하기</title>
</head>
<body>
<!-- 지도를 표시할 div 입니다 -->
<div id="map" style="width:100%;height:350px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=45436d685fe287550099139230ab9fa3"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>지도 생성하기</title>
</head>
<body>
<!-- 지도를 표시할 div 입니다 -->
<div id="map" style="width:100%;height:350px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=45436d685fe287550099139230ab9fa3"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.798704, 128.915402), // 지도의 중심좌표
level: 10 // 지도의 확대 레벨
};
// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
</script>
</body>
</html>
webmap1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>주소로 장소 표시하기</title>
</head>
<body>
<p style="margin-top:-12px">
<em class="link">
<a href="javascript:void(0);" onclick="window.open('http://fiy.daum.net/fiy/map/CsGeneral.daum', '_blank', 'width=981, height=650')">
혹시 주소 결과가 잘못 나오는 경우에는 여기에 제보해주세요.
</a>
</em>
</p>
<div id="map" style="width:100%;height:350px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=45436d685fe287550099139230ab9fa3&libraries=services"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
// 주소로 좌표를 검색합니다
geocoder.addressSearch('강원특별자치도 강릉시 해안로406번길 2', 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;">우리회사</div>'
});
infowindow.open(map, marker);
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
map.setCenter(coords);
}
});
</script>
</body>
</html>
webmap2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>키워드로 장소검색하기</title>
</head>
<body>
<div id="map" style="width:100%;height:350px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=45436d685fe287550099139230ab9fa3&libraries=services"></script>
<input type = "text" id = "address" placeholder="주소를 입력하세요">
<button onclick="searchAddress()">검색</button>
<script>
// 마커를 클릭하면 장소명을 표출할 인포윈도우 입니다
var infowindow = new kakao.maps.InfoWindow({zIndex:1});
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(35.172320, 126.858133), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 장소 검색 객체를 생성합니다
var ps = new kakao.maps.services.Places();
// 키워드로 장소를 검색합니다
ps.keywordSearch('광주광산구 맛집', placesSearchCB);
// 키워드 검색 완료 시 호출되는 콜백함수 입니다
function placesSearchCB (data, status, pagination) {
if (status === kakao.maps.services.Status.OK) {
// 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
// LatLngBounds 객체에 좌표를 추가합니다
var bounds = new kakao.maps.LatLngBounds();
for (var i=0; i<data.length; i++) {
displayMarker(data[i]);
bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x));
}
// 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
map.setBounds(bounds);
}
}
// 지도에 마커를 표시하는 함수입니다
function displayMarker(place) {
// 마커를 생성하고 지도에 표시합니다
var marker = new kakao.maps.Marker({
map: map,
position: new kakao.maps.LatLng(place.y, place.x)
});
// 마커에 클릭이벤트를 등록합니다
kakao.maps.event.addListener(marker, 'click', function() {
// 마커를 클릭하면 장소명이 인포윈도우에 표출됩니다
infowindow.setContent('<div style="padding:5px;font-size:12px;">' + place.place_name + '</div>');
infowindow.open(map, marker);
});
}
function searchAddress() {
// 검색어 입력 필드값 가져오기
var address = document.getElementById('address').value;
// 키워드로 장소를 검색합니다
ps.keywordSearch('address', placesSearchCB);
}
</script>
</body>
</html>728x90
반응형