Library
지도 API
IT의 큰손
2023. 5. 3. 11:50
728x90
★ 지도 API
- 네이버 맵 API
- 카카오 맵 API
- 구글 맵 API
■ 카카오맵 API
■ 순서
- 1. 카카오 개발자사이트 (https://developers.kakao.com) 접속
- 2. 개발자 등록 및 앱 생성
- 3. 웹 플랫폼 추가: 앱 선택 – [플랫폼] – [Web 플랫폼 등록] – 사이트 도메인 등록
- 4. 사이트 도메인 등록: [웹] 플랫폼을 선택하고, [사이트 도메인] 을 등록합니다. (예: http://localhost:8080)
- 5. 페이지 상단의 [JavaScript 키]를 지도 API의 appkey로 사용합니다.
- 6. 앱을 실행합니다.
■ 1. 애플리케이션 추가
■ 생성된 앱에 들어가보면 키가 있는데 해당 키를 이용하면 됨.
■ 플랫폼 선택
- 도메인 주소 입력
■ 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kakao 지도 시작하기</title>
</head>
<body>
<div id="map" style="width:500px;height:400px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>
<script>
var container = document.getElementById('map');
var options = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 3
};
var map = new kakao.maps.Map(container, options);
</script>
</body>
</html>
■ 실행 결과
■ 버튼을 누르면 해당 위치로 이동
- 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/example.css">
<style>
#map {
width : 1200px;
height : 600px;
}
</style>
</head>
<body>
<!-- -->
<div id="map"></div>
<hr>
<input type="button" value="한독 빌딩으로 이동하기" id="btn1" data-lat="37.4994" data-lang="127.0333">
<input type="button" value="신촌으로 이동하기" id="btn2" data-lat="37.5592" data-lang="126.9365">
<input type="button" value="잠실로 이동하기" id="btn3" data-lat="37.5092" data-lang="127.0997">
<input type="button" value="역삼역으로 이동하기" id="btn4">
<hr>
<input type="button" value="확대하기" id="btn5">
<input type="button" value="축소하기" id="btn6">
<script src="js/jquery-3.6.4.js"></script>
<script src="js/data.js"></script>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=7b34a8317f5befe832f9eefe047ae818"></script>
<script>
var container = document.getElementById('map');
var options = {
center: new kakao.maps.LatLng(37.4994, 127.0333),
level: 2
};
//지도를 그린 것
var map = new kakao.maps.Map(container, options);
// $('input[type=button]').click(function() {
// //JavaScript
// // - obj.dataset['lat']
// // - obj.dataset['lng']
// //jQuery
// // alert($(this).data('lng'));
// const point = new kakao.maps.LatLng($(this).data('lat'), $(this).data('lng'));
// map.setCenter(point);
// });
$('#btn1').click(function() {
const point = new kakao.maps.LatLng(list[0].position.lat, list[0].position.lng);
// map.setCenter(point);
map.panTo(point); //이렇게 해도 이동 가능
}); //한독 빌딩
$('#btn4').click(function() {
const point = new kakao.maps.LatLng(list[1].position.lat, list[1].position.lng);
map.setCenter(point);
}) ;//역삼역
//드래그, 확대/축소 금지 시키는법
map.setDraggable(false);
map.setZoomable(false);
$('#btn6').click(function() {
// alert(map.getLevel());
map.setLevel(map.getLevel() + 1);
});
$('#btn5').click(function() {
// alert(map.getLevel());
map.setLevel(map.getLevel() - 1);
});
</script>
<script>
</script>
</body>
</html>- 실행 결과
■ map을 클릭하면 위도와 경도를 알려주고, 마커를 찍는 Event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/example.css">
<style>
#main {
display : flex;
}
</style>
</head>
<body>
<!-- -->
<h1>지도</h1>
<div id="main">
<div id="map" style="width:1200px; height : 450px;"></div>
<ul id="plist">
</ul>
</div>
<hr>
<div id="message"></div>
<script src="js/jquery-3.6.4.js"></script>
<script src="js/data.js"></script>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=7b34a8317f5befe832f9eefe047ae818"></script>
<script>
const map = new kakao.maps.Map(document.getElementById('map'), {
center : new kakao.maps.LatLng(37.4994, 127.0333),
level : 3
});
// $(map).click(function() {
// alert();
// });
/*
kakao.maps.event.addListener(map, 'click', function(event) {
// alert(event.latLng);
document.getElementById('message').innerText
= `클릭한 위치 : 위도(${event.latLng.getLat()}), 경도(${event.latLng.getLng()})`;
// map.panTo()
//마커 표시
const marker = new kakao.maps.Marker({
position: event.latLng
});
marker.setMap(map);
});
*/
/*
list.forEach((item, index) => {
// console.log(item.name, item.position.lat, item.position.lng);
const marker = new kakao.maps.Marker({
position : new kakao.maps.LatLng(item.position.lat, item.position.lng)
});
marker.setMap(map);
});
*/
let marker = null;
list.forEach((item) => {
// $('#plist').append(`
// <li>${item.name}</li>
// `);
$(`<li>${item.name}</li>`)
.css('cursor', 'pointer')
.click(()=> {
// alert($(event.target).text());
$('#plist li').css('color', 'black');
$(event.target).css('color','blue');
// alert(item.position.lat);
// alert(item.position.lng);
if(marker != null) {
//마커 삭제
marker.setMap(null);
}
// if(marker==null) {
marker = new kakao.maps.Marker({
position : new kakao.maps.LatLng(item.position.lat, item.position.lng)
});
//마커를 지도에 찍는 것
marker.setMap(map);
//해당 좌표를 지도 중심으로
map.panTo( new kakao.maps.LatLng(item.position.lat, item.position.lng));
// }
})
.appendTo('#plist');
});
</script>
</body>
</html>- 실행 결과
728x90