github : kakaomap


카카오 개발자사이트에서 아래 두가지 설정









application.property

spring.application.name=mapproject
server.servlet.session.timeout=2h
# Database Setting
spring.datasource.dbcp2.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/mapproject
spring.datasource.username=root
spring.datasource.password=1111
# JPA
spring.jpa.hibernate.ddl-auto=update
spring.jpa.properties.hibernate.show_sql=true
# aws
cloud.aws.s3.endpoint=https://kdh0608.s3.ap-northeast-2.amazonaws.com




Controller

package com.example.mapproject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class MapController {
@GetMapping("/")
public String index() {
return "index";
}

@GetMapping("/map1")
public String map1() {
return "map1";
 }

@GetMapping("/map2")
public String map2() {
return "map2";
}

@GetMapping("/map3")
public String map3() {
return "map3";
}

}


index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<h1> kakao map </h1>
<br>
<br>
<p><a href="/map1">map1</a><br>
<p><a href="/map2">map2</a><br>
<p><a href="/map2">map2</a><br>
</body>
</html>


map1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<h1> kakao map 1 Basic </h1>
<br>
<br>
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"/>
 <title>Kakao 지도 시작하기</title>
</head>
<body>

<!-- 1단계 지도를 표시할 위치 id값 -->
 <div id="map" style="width:500px;height:400px;"></div>

<!-- 2단계 api key 값 -->
 <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=9eda72310d10e70186b843a0809cac6c"></script>

<!-- 3단계 지도 설정 -->
 <script>
 var container = document.getElementById('map'); //id값
 var options = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 3
};
var map = new kakao.maps.Map(container, options);
</script>
</body>
</html>


</body>
</html>






<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1> kakao map 1 지도 이동시키기 </h1>
<br>
<br>
<!-- 1단계 지도를 표시할 위치 id값 -->
 <div id="map" style="width:500px;height:400px;"></div>
<button onclick="setCenter()">지도 이동</button>
<!-- 2단계 api key 값 & sdk -->
 <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=9eda72310d10e70186b843a0809cac6c"></script>

<!-- 3단계 지도 설정 -->
 <script>
var container = document.getElementById('map'); //id값
 var options = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 2
};
var map = new kakao.maps.Map(container, options);


function setCenter(){
//이동할 새로운 위치 정보, 위도와 경도
 var moveLatLng = new kakao.maps.LatLng(37.5666805, 126.9784147);

map.setCenter(moveLatLng);
}



</script>
</body>
</html>


   


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1> kakao map 2 지도 정보 알아내기 </h1>
<br>
<br>
<!-- 1단계 지도를 표시할 위치 id값 -->
 <div id="map" style="width:500px;height:400px;"></div>
<button onclick="getInfo()">지도 정보</button>
 <div id="result"></div>
<!-- 2단계 api key 값 & sdk -->
 <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=9eda72310d10e70186b843a0809cac6c"></script>

<!-- 3단계 지도 설정 -->
 <script>
var container = document.getElementById('map'); //id값
 var options = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 2
};
var map = new kakao.maps.Map(container, options);


function getInfo() {
//현재 지도에서의 중앙 위치 좌표 값
 var center = map.getCenter();

//현재 지도에서의 축적(레벨) 값
 var level = map.getLevel();

//지도에서 현재 영역 정보
 var bounds = map.getBounds();

//지도에서 영역 정보 남서 북동
 var boundsStr = bounds.toString();

var msg = '지도의 중심좌표는 위도 ' + center.getLat() + ', <br>';
msg += '경도 ' + center.getLng() + '이고 <br>';
msg += '지도의 레벨은 ' + level + '입니다. <br><br>';
msg += '지도의 영역 정보는 ' + boundsStr + '입니다.';

var resultDiv = document.getElementById('result');
resultDiv.innerHTML = msg;

}


</script>
</body>
</html>



  














한국정보시스템개발원 |
Hankook Information System Institute

austiny@snu.ac.kr / austiny@gatech.edu