@GetMapping("/host/roomOne")
public String hostRoomOne(Model model,
@RequestParam("roomId") int roomId, @RequestParam("detailAddressId") int detailAddressId) {
Map<String, Object> result = roomService.getHostRoomOne(roomId, detailAddressId);
model.addAttribute("room",result.get("room"));
model.addAttribute("address",result.get("address"));
model.addAttribute("hashtag",result.get("hashtag"));
return "/host/room/roomOne";
}
@PostMapping("/host/modifyRoom")
public String postModifyRoom(RedirectAttributes redirect, Room room, Address address, String hashtag) {
address = roomService.modifyRoom(room, address, hashtag);
redirect.addAttribute("roomId",room.getRoomId());
redirect.addAttribute("detailAddressId",address.getDetailAddressId());
return "redirect:/host/roomOne";
}
[ 숙소의 정보 수정이 완료되면, 숙소 상세보기 페이지를 띄우도록 하는 redirect 요청입니다]
redirect를 사용하는 이유 : 저는 Controller에서 메서드의 작업이 끝난 후 return값으로 /webapp/WEB-INF/jsp 위치의 jsp파일명을 반환합니다. 숙소 수정이 완료된 후, 숙소 상세보기 페이지인 roomOne.jsp가 열리도록 해야하는데, 해당 숙소의 상세정보도 받아와야 합니다. 그렇기 때문에 간단하게 jsp만 여는것이 아니라 숙소 상세정보를 가져온 후 해당 jsp를 포워딩하는 /host/roomOne으로 redirect를 진행합니다.
- postModifyRoom 메서드의 작업이 끝나면 hostRoomOne 메서드로 redirect를 진행합니다.
- redirect를 진행하는 메서드에서는 param값으로 'RedirectAttributes redirect'를 받고, redirect.addAttribute("이름",값);으로 redirect를 하는 위치로 값을 전달한다.
- redirect를 요청받은 메서드의 param값은 @RequestParam("이름") 자료형 변수명의 형식으로 값을 받아 사용합니다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<!-- jquery 사용 -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table>
<tr>
<td>주소</td>
<td><input type="text" id="address"></td>
<td><button type="button" id="searchBtn">검색</button></td>
</tr>
<tr>
<td>상세 주소</td>
<td><input type="text" name="detailAddress2"></td>
<td></td>
</tr>
</table>
<div id="map" style="width:100%;height:350px;"></div>
<!-- kakao API -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=자바스크립트 키&libraries=services"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
$('#searchBtn').click(function(){
// 버튼을 click했을때
// 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
// 주소로 좌표를 검색합니다
geocoder.addressSearch($('#address').val(), 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>
검색이 실질적으로 되는 부분은 id가 address인 input입니다.
해당 부분에 지번 주소, 도로명 주소, 해당 주소 포함 상세주소 등 어떠한 형식으로 입력해도 버튼을 누르면, kakao API를 통해 좌표를 검색하여 지도에 위치를 찍어줍니다.
문제점 : 어떠한 방식으로 입력해도 주소에 찍히기 때문에 원하는 형식으로 input의 value값을 바꿔줘야 주소값을 저장하고 활용할 때, 문제가 생기지 않습니다.
ex) 서울 마포구 러아니푸로 8길 79-5 순돌아파트 101동 809호
: 서울특별시로 저장해야하는데 서울로 되어있음
: 러아니푸로 8길이 띄어쓰기 적용이 되어있음
: 건물 부번까지(79-5)만 저장해야 하는데 상세 주소가 포함되어있음
: 도로명 주소를 받아야하는데 지번주소로 되어있음
📘 주소 입력시 지도에 출력
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<!-- jquery 사용 -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table>
<tr>
<td>주소</td>
<td><input type="text" name="detailAddress" id="address"></td>
<td><button type="button" id="searchBtn">검색</button></td>
</tr>
<tr>
<td>상세 주소</td>
<td><input type="text" name="detailAddress2"></td>
<td></td>
</tr>
</table>
<div id="map" style="width:100%;height:350px;"></div>
<!-- kakao API -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=자바스크립트 키&libraries=services"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
$('#searchBtn').click(function(){
// 버튼을 click했을때
// 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
// 주소로 좌표를 검색합니다
geocoder.addressSearch($('#address').val(), function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
// 추출한 좌표를 통해 도로명 주소 추출
let lat = result[0].y;
let lng = result[0].x;
getAddr(lat,lng);
function getAddr(lat,lng){
let geocoder = new kakao.maps.services.Geocoder();
let coord = new kakao.maps.LatLng(lat, lng);
let callback = function(result, status) {
if (status === kakao.maps.services.Status.OK) {
// 추출한 도로명 주소를 해당 input의 value값으로 적용
$('#address').val(result[0].road_address.address_name);
}
}
geocoder.coord2Address(coord.getLng(), coord.getLat(), callback);
}
// 결과값으로 받은 위치를 마커로 표시합니다
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>
이슈를 해결하는 코드입니다.
주소를 통해 좌표값을 추출하면, 해당 좌표값으로 다시 원하는 형태의 주소(도로명 주소)를 추출합니다.
원하는 형태의 주소값은 처음 주소를 입력받은 id가 address인 input의 value값으로 다시 넣어줍니다.
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=자바스크립트 키&libraries=services"></script>
<script>
let lat = 37.5566803113882;
let lng = 126.904501286522;
getAddr(lat,lng);
function getAddr(lat,lng){
let geocoder = new kakao.maps.services.Geocoder();
let coord = new kakao.maps.LatLng(lat, lng);
let callback = function(result, status) {
if (status === kakao.maps.services.Status.OK) {
console.log(result);
}
}
geocoder.coord2Address(coord.getLng(), coord.getLat(), callback);
}
</script>
원하는 위치의 좌표를 lat, lng변수에 넣어 실행하면 kakao API를 통해 지번주소와 도로명 주소를 추출 할 수 있습니다.
(위치는 제가 좋아하는 맛집입니다..)
📗 좌표로 지번 주소 추출
해당 주소 데이터에서 address_name을 추출하는 방법을 알려드리겠습니다.
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=자바스크립트 키&libraries=services"></script>
<script>
let lat = 37.5566803113882;
let lng = 126.904501286522;
getAddr(lat,lng);
function getAddr(lat,lng){
let geocoder = new kakao.maps.services.Geocoder();
let coord = new kakao.maps.LatLng(lat, lng);
let callback = function(result, status) {
if (status === kakao.maps.services.Status.OK) {
console.log(result[0].address.address_name);
}
}
geocoder.coord2Address(coord.getLng(), coord.getLat(), callback);
}
</script>
이전에는 주소데이터의 결과값인 result만을 출력하여 데이터 집합을 출력하였습니다.
현재는 result[0].address.address_name을 통해 지번 주소에 직접 접근하여 데이터를 추출하였습니다.
📗 좌표로 도로명 주소 추출
해당 주소 데이터에서 address_name을 추출하는 방법을 알려드리겠습니다.
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=자바스크립트 키&libraries=services"></script>
<script>
let lat = 37.5566803113882;
let lng = 126.904501286522;
getAddr(lat,lng);
function getAddr(lat,lng){
let geocoder = new kakao.maps.services.Geocoder();
let coord = new kakao.maps.LatLng(lat, lng);
let callback = function(result, status) {
if (status === kakao.maps.services.Status.OK) {
console.log(result[0].road_address.address_name);
}
}
geocoder.coord2Address(coord.getLng(), coord.getLat(), callback);
}
</script>
지번 주소의 경우와 마찬가지 입니다.
result[0].address.address_name을 통해 도로명 주소에 직접 접근하여 데이터를 추출하였습니다.
- Failed to load resource : the server responded with a status of 401 (Unauthorized)
- Uncought ReferenceError : kakao is not defined
- Failed to load resource : the server responded with a status of 404 ( )
💊 오류 해결 방법
1. API 키값 오류
kakao developers에서 발급받은 본인의 API key값을 확인합니다.
<!-- kakao API -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=본인의 키값&libraries=services"></script>
kakao 지도 API를 사용하기 위해 작성한 script코드 속 appkey값에 문제점이 없는지 확인합니다. 잘못된 키 값을 사용하면 오류가 생길 수 있습니다.
2. 플랫폼 -> Web -> 사이트 도메인 확인
해당 위치에 프로젝트 도메인을 입력하지 않으면, 오류가 발생합니다.
저는 기존에 사이트 도메인으로 http://localhost:8080을 넣어두고 localhost 8080번 포트에서 프로젝트를 진행했습니다. 이후에 :8080을 붙이는 것이 너무 불편하여 80번 포트로 변경 후 프로그램을 실행했더니 해당 오류가 발생하였습니다. 찾아본 결과 도메인을 추가하지 않아서 발생한 문제인것을 알고 추가하여 오류를 해결하였습니다.
위 링크로 접속하고 [Javascript + HTML]을 누르면 카카오지도 API 활용 코드를 확인할 수 있습니다.
AddressController.java
package com.practice.fjdkslvn.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class AddressController {
@GetMapping("/address")
public String address() {
System.out.println("카카오 API 테스트");
return "address";
}
}
address.jsp를 포워딩하는 코드를 작성합니다.
address.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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=당신의 키값을 넣어주세요&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('서울 송파구 올림픽로 240', 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>
포워딩 되는 jsp는 처음 걸려있던 링크의 코드를 복붙하고 자신의 javascript키값을 넣은 후, 원하는 주소를 입력하여 활용하면 됩니다.
저는 롯데월드를 넣어 실행해보았습니다.
저는 카카오지도 API를 활용하기 위한 플랫폼 설정을 localhost로 해두었습니다. 그래서 localhost 아래에 있는 주소는 모두 정상적으로 API가 적용되도록 되어있습니다. 좌표를 직접 구하지 않고 도로명주소와 지번주소를 통해 쉽게 좌표를 찍을 수 있었습니다.
