Ex09의 실습, 지도의 좌표를 사용하여 지도에 마커를 찍고 광주의 관광지를 추천하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="shortcut icon" href="#">
</head>
<body>
<div id="map" style="width:100%;height:350px;"></div>
<button id="getGjBtn">광주 관광지 가져오기</button>
<button id="randomGjBtn" style="display: none;">오늘의 관광지 추천</button>
<div id="randomContainer"></div>
<script src="./js/jquery-3.7.0.js"></script>
<script type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=카카오 앱 키"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(35.1466, 126.9223), // 지도의 중심좌표
level: 4 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 마커를 표시할 위치와 title 객체 배열입니다
var positions = [
{
title: '인공지능사관학교',
latlng: new kakao.maps.LatLng(35.1466, 126.9223)
},
{
title: 'KT 구내식당',
latlng: new kakao.maps.LatLng(35.1464, 126.9236)
},
{
title: '호시마츠라멘',
latlng: new kakao.maps.LatLng(35.149, 126.9234)
},
{
title: '근린공원',
latlng: new kakao.maps.LatLng(33.451393, 126.570738)
}
];
// 마커 이미지의 이미지 주소입니다
var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
for (var i = 0; i < positions.length; i++) {
// 마커 이미지의 이미지 크기 입니다
var imageSize = new kakao.maps.Size(24, 35);
// 마커 이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions[i].latlng, // 마커를 표시할 위치
title: positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
image: markerImage // 마커 이미지
});
}
const makeMap = (lat, lng, lv) => {
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(lat, lng), // 지도의 중심좌표
level: lv // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 마커 이미지의 이미지 주소입니다
var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
for (var i = 0; i < positions.length; i++) {
// 마커 이미지의 이미지 크기 입니다
var imageSize = new kakao.maps.Size(24, 35);
// 마커 이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions[i].latlng, // 마커를 표시할 위치
title: positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
image: markerImage // 마커 이미지
});
}
}
/*
광주 관광지 가져오기 클릭시, console창에 광주 관광지 데이터가 뜨게하기
*/
let openApi_URL = ""
$("#getGjBtn").on("click", () => {
$("#randomGjBtn").css("display", "inline-block")
$.ajax({
url: openApi_URL,
success: (result) => {
let tourDestList = result.TourDestBaseInfo
for (i = 0; i < tourDestList.length; i++) {
// console.log(tourDestList[i].tourDestNm)
// console.log(tourDestList[i].lat)
// console.log(tourDestList[i].lng)
positions.push({
title: tourDestList[i].tourDestNm,
latlng: new kakao.maps.LatLng(tourDestList[i].lat, tourDestList[i].lng)
})
}
console.log("positions", positions)
makeMap(35.1466, 126.9223, 8)
}
})
})
$("#randomGjBtn").on("click", () => {
$.ajax({
url: openApi_URL,
success: (result) => {
let tourDestList = result.TourDestBaseInfo
// 1. 랜덤한 수 뽑기 ranNum
// 0 ~ 배열의 길이만큼
let ranNum = parseInt(Math.random() * tourDestList.length)
// positions.push({ // 추천 관광지에 마커 생성
// title: tourDestList[ranNum].tourDestNm,
// latlng: new kakao.maps.LatLng(tourDestList[ranNum].lat, tourDestList[ranNum].lng)
// })
// 2. 버튼 밑에 h2 태그로 오늘의 추천 관광지는 ~입니다.
$("#randomContainer").html(`<h2>오늘의 추천 관광지는 ${tourDestList[ranNum].tourDestNm}입니다.</h2>`)
// 3. 해당 추천 관광지가 보이도록 map을 다시 설정
makeMap(tourDestList[ranNum].lat, tourDestList[ranNum].lng, 4)
}
})
})
</script>
</body>
</html>
친절한 카카오의 지도에 마커찍기 설명을 보며 따라하면 된다.
'Front-End > 4. jQuery' 카테고리의 다른 글
| Ex09_카카오map.html (0) | 2023.07.03 |
|---|---|
| Ex08_포켓몬도감.html (0) | 2023.06.26 |
| Ex07_비동기 통신.html (0) | 2023.06.22 |
| Ex06_animate.html (0) | 2023.06.22 |
| Ex05_jQuery추가삭제.html (0) | 2023.06.22 |
