게시글에 위치 정보까지 추가하고 싶어서 kakao 지도 api를 적용해보려고 한다.
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
먼저 위 사이트에 가입해서 키를 받아와야한다.
https://apis.map.kakao.com/web/
위 사이트에 아주 친절하게 잘 설명되어있다.
그날 작성하는 게시물과 관련된 지도를 나타내주려 한다.
나는 장소를 검색하면 그 근방의 지도가 나타나지고 거기서 내가 원하는 위치에 마커를 표시하는 기능을 구현하고 싶다.
그래서 sample 중에서 위 두개의 sample을 적절히 섞을거다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>키워드로 장소검색하고 목록으로 표출하기</title>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=appkey&libraries=services,clusterer,drawing"></script>
</head>
<body>
<div class="option">
<div>
<form onsubmit="searchPlaces(); return false;">
키워드 : <input type="text" id="keyword" size="15">
<button type="submit">검색하기</button>
</form>
</div>
</div>
<hr>
<div id="map" style="width:100%;height:500px;"></div>
<a href="#" id="clickLatlng">장소 저장</a>
<input id="x" type="hidden" value="37.5667701408774">
<input id="y" type="hidden" value="126.97864095520264">
<script>
// 마커를 클릭하면 장소명을 표출할 인포윈도우 입니다
var infowindow = new kakao.maps.InfoWindow({zIndex:1});
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.566826, 126.9786567), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
var marker = new kakao.maps.Marker({
// 지도 중심좌표에 마커를 생성합니다
position: map.getCenter()
});
// 지도에 마커를 표시합니다
marker.setMap(map);
// 장소 검색 객체를 생성합니다
var ps = new kakao.maps.services.Places();
function searchPlaces() {
var keyword = document.getElementById('keyword').value;
// 장소검색 객체를 통해 키워드로 장소검색을 요청합니다
ps.keywordSearch(keyword, 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);
}
}
kakao.maps.event.addListener(map, 'click', function(mouseEvent) {
// 클릭한 위도, 경도 정보를 가져옵니다
var latlng = mouseEvent.latLng;
// 마커 위치를 클릭한 위치로 옮깁니다
marker.setPosition(latlng);
opener.document.getElementById('placeX').value = latlng.getLat();
opener.document.getElementById('placeY').value = latlng.getLng();
});
</script>
</body>
</html>
나는 새로운 창을 띄워서 지도를 볼 생각이기 때문에 자식창과 부모창의 값을 왔다갔다 하는 코드들도 추가했다.
기존의 sample 코드에다가 몇개는 빼고 몇개는 더해서 내가 원하는 기능을 구현했다!
원하는 장소를 클릭하면 우측에 value 값이 바뀌는 걸 볼 수 있다.
이 value값을 저장했다가 '저장된 장소' 링크를 클릭하면 저장된 장소를 볼 수 있다.
다음에는 이 저장된 장소의 위치를 Dto에 담아와서 DB에 저장시키고
작성완료된 게시물에서 볼 수 있게 하는 기능을 구현해보겠다.
'Spring' 카테고리의 다른 글
| 내가 만든 웹사이트에 OpenGraph 적용해보기 (0) | 2022.11.24 |
|---|---|
| Spring에서 html 형식 메일 보내보기 (2) | 2022.11.07 |
| Session에 값을 추가하고 interceptor로 검사해서 통과한 사용자만 페이지에 접속할 수 있도록 (0) | 2022.10.21 |
| Port 8080 was already in use 에러가 뜨는 경우 해결방법 (2) | 2022.10.14 |
| @Scheduled, cron (2) | 2022.10.12 |
