jesus

HIS .Institute

  • Signup
    Sign up
    or use email
    Forgot Password?
  • Signin
    Sign in
    Forgot Password?
    or Social Login
국립공주대학교
GROWITH 프로젝트아름다운 프로젝트맛 탐정단Space Creation
경북대학교
  • App
  • Book
  • Lecture
  • 0 . . Template
  • 1 . Introduction.
  • 1 1. . About Spring
  • 1 2. . About Spring Boot
  • 1 3. . Dev. Environment
  • 1 4. . Hello World
  • 1 5. . Summary
  • 2 . Basic Database.
  • 2 1. . MySql & Heidi
  • 2 2. . JDBC
  • 2 3. . MyBatis
  • 2 4. . JPA
  • 2 5. . Summary
  • 3 . Basic Spring Security.
  • 3 1. . About Spring Security
  • 3 2. . Signup/Signin/Signout
  • 3 3. . Security Information
  • 3 4. . Fragment
  • 3 5. . Summary
  • 4 . Basic Project.
  • 4 1. . Question & Answer
  • 4 2. . Board & Reply
  • 4 3. . Cart & Product
  • 4 4. . Image Upload
  • 4 5. . Summary
  • 5 . Advanced Project.
  • 5 1. . Admin
  • 5 2. . Chat with Ajax
  • 5 3. . Other Login - Korean
  • 5 4. . Like & View Count
  • 5 5. . Summary
  • 6 . Expert Project.
  • 6 1. . Map - Korean
  • 6 2. . Mail - Korean
  • 6 3. . SMS - Korean
  • 6 4. . Credit Card - Korean
  • 6 5. . Summary
  • 7 . Frontend Project.
  • 7 1. . HTML/CSS/JS
  • 7 2. . Bootstrap
  • 7 3. . Theme
  • 7 4. . Etc
  • 7 5. . Summary
  • 8 . Mini Project.
  • 8 1. . Storyboard
  • 8 2. . Backend - Korean
  • 8 3. . Frontend
  • 8 4. . Portfolio
  • 8 5. . Summary
  • 9 . Deploy. Project.
  • 9 1. . AWS
  • 9 2. . Gabia
  • 9 3. . Domain
  • 9 4. . Etc
  • 9 5. . Summary
  • A 1. Bug Repost.
  • Appendix 0. .

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>



  














HISInstitute |
Hankook Information System Institute

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

Chat GPT