고마구의 개발 블로그
240721 13주차 토요일 - 지도만들기 본문
자기 근처에 있는 공연장을 추천해주는 시스템은 사용자 경험을 크게 향상시킬 수 있는 훌륭한 아이디어입니다. 이 기능을 구현하기 위해 다음과 같은 단계를 따라 진행할 수 있습니다.
1. 사용자 위치 정보 수집
- 사용자 동의 받기: GPS 위치 정보를 사용하기 위해 사용자로부터 동의를 받아야 합니다.
- 위치 정보 수집: JavaScript의 navigator.geolocation API를 사용하여 사용자의 현재 위치를 가져옵니다.
2. 공연장 데이터베이스 구축
- 공연장 정보: 공연장의 이름, 주소, GPS 좌표, 공연 정보 등의 데이터를 데이터베이스에 저장합니다.
- API 통합: 외부 API를 사용하여 공연장 정보를 동기화하거나, 수동으로 데이터를 입력합니다.
3. 거리 계산
- 거리 계산 로직: 사용자 위치와 각 공연장의 위치 사이의 거리를 계산합니다. Haversine 공식을 사용하여 두 좌표 사이의 거리를 계산할 수 있습니다.
4. 공연장 추천
- 가까운 공연장 정렬: 계산된 거리 정보를 기반으로 가까운 공연장 순으로 정렬하여 추천합니다.
- 공연장 정보 표시: 추천된 공연장 리스트와 함께 지도에 마커로 표시합니다.
5. 사용자 인터페이스
- 지도 표시: 사용자의 현재 위치와 추천된 공연장을 표시하는 인터페이스를 제공합니다.
- 리스트 표시: 가까운 공연장의 리스트와 상세 정보를 함께 보여줍니다.
예시 코드
아래는 기본적인 구현 예시입니다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nearby Theaters</title>
<script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=YOUR_APP_KEY"></script>
</head>
<body>
<h1>Nearby Theaters</h1>
<div id="map" style="width:100%;height:400px;"></div>
<ul id="theater-list"></ul>
<script src="script.js"></script>
</body>
</html>
JavaScript
document.addEventListener('DOMContentLoaded', () => {
// Kakao 지도 API 초기화
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.5665, 126.9780), // 초기 지도 중심좌표 (서울 시청)
level: 5 // 지도 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption);
// 사용자의 현재 위치 가져오기
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position => {
var lat = position.coords.latitude,
lon = position.coords.longitude;
var locPosition = new kakao.maps.LatLng(lat, lon),
message = '<div style="padding:5px;">현재 위치</div>';
displayMarker(locPosition, message);
// 근처 공연장 추천
fetchNearbyTheaters(lat, lon);
});
} else {
var locPosition = new kakao.maps.LatLng(37.5665, 126.9780),
message = 'geolocation을 사용할 수 없습니다.';
displayMarker(locPosition, message);
}
// 마커 표시 함수
function displayMarker(locPosition, message) {
var marker = new kakao.maps.Marker({
map: map,
position: locPosition
});
var iwContent = message,
iwRemoveable = true;
var infowindow = new kakao.maps.InfoWindow({
content : iwContent,
removable : iwRemoveable
});
infowindow.open(map, marker);
map.setCenter(locPosition);
}
// 근처 공연장 추천 함수
function fetchNearbyTheaters(lat, lon) {
// 예시 데이터 (실제 데이터는 데이터베이스 또는 API에서 가져와야 함)
var theaters = [
{ name: "Theater 1", lat: 37.5665, lon: 126.9780 },
{ name: "Theater 2", lat: 37.5655, lon: 126.9760 },
// ... 추가 공연장 데이터
];
var listContainer = document.getElementById('theater-list');
listContainer.innerHTML = '';
theaters.forEach(theater => {
var theaterPosition = new kakao.maps.LatLng(theater.lat, theater.lon);
var distance = getDistance(lat, lon, theater.lat, theater.lon);
// 일정 거리 이내의 공연장만 표시 (예: 10km 이내)
if (distance <= 10) {
displayMarker(theaterPosition, theater.name);
var listItem = document.createElement('li');
listItem.textContent = `${theater.name} (거리: ${distance.toFixed(2)} km)`;
listContainer.appendChild(listItem);
}
});
}
// 거리 계산 함수 (Haversine 공식)
function getDistance(lat1, lon1, lat2, lon2) {
var R = 6371; // 지구의 반경 (km)
var dLat = (lat2 - lat1) * Math.PI / 180;
var dLon = (lon2 - lon1) * Math.PI / 180;
var a =
0.5 - Math.cos(dLat)/2 +
Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
(1 - Math.cos(dLon))/2;
return R * 2 * Math.asin(Math.sqrt(a));
}
});
'KDT풀스택과정 공부' 카테고리의 다른 글
| 240723 14주차 화요일 - Spring 07 (0) | 2024.07.23 |
|---|---|
| 240722 14주차 월요일 - Spring 06 (0) | 2024.07.22 |
| 240719 금요일 (0) | 2024.07.19 |
| 240719 13주차 금요일 - Spring 05 (0) | 2024.07.19 |
| 240718 13주차 목요일 - Spring 04 (0) | 2024.07.18 |