<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>카카오 지도 다루기</title>
<!-- css 파일을 불러오는 코드 -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css"
<!-- 구글 웹 폰트 사용을 위한 CDN -->
<!-- 내가 만든 CSS 파일-->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
#map {
width: 100%;
height: 300px;
}
</style>
<!-- swiper cdn -->
<!-- jquery cdn -->
<!-- kakao map cdn -->
<script type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=앱키를 입력하세요"></script>
<!-- javascript 작성 공간 -->
<script>
$(function () {
//var container = document.getElementById('map');
//var container = document.querySelector("#map");
var container = $("#map")[0];
var options = {
//지도의 중심좌표(위도-latiude 경도-longitude)
center: new kakao.maps.LatLng(33.450701, 126.570667),
//지도의 배율(zoom level : 1부터 14까지)
level: 3
};
//변수로 만들면 범위 제한이 걸린다.
// var map = new kakao.maps.Map(container, options);
//범위 제한을 없애고 싶다면 외부에 만들거나 window에 추가한다.
window.map = new kakao.maps.Map(container, options);
$(".btn-move").click(function () {
//지도 이동 처리
var lat = $(this).data("lat");
var lng = $(this).data("lng");
// 이동할 위도 경도 위치를 생성합니다
var moveLatLon = new kakao.maps.LatLng(lat, lng);
// 지도 중심을 이동 시킵니다
map.setCenter(moveLatLon);
});
});
</script>
</head>
<body>
<div class=" container w-500">
<div class="row">
<h1>카카오 지도 다루기</h1>
</div>
<div class="row">
<div id="map"></div>
</div>
<div class="row">
<button class="btn btn-move" data-lat="37.554592" data-lng="126.971820">서울역</button>
<button class="btn btn-move" data-lat="36.331452" data-lng="127.433196">대전역</button>
<button class="btn btn-move" data-lat="35.876014" data-lng="128.595388">대구역</button>
<button class="btn btn-move" data-lat="35.114992" data-lng="129.040797">부산역</button>
</div>
</div>
</body>
</html>
'Javascript' 카테고리의 다른 글
| 카카오 지도 다루기 3(주소로 지도 찾기) (0) | 2023.11.17 |
|---|---|
| 카카오 지도 다루기 2 (0) | 2023.11.16 |
| Kakao 지도 시작하기 (0) | 2023.11.14 |
| 파일 업로드2 (0) | 2023.11.13 |
| 파일 업로드 (0) | 2023.11.10 |