728x90
안녕하세요,
오늘은 OpenStreetMap 지도에서 두 지점의 경로를 출력해보도록 하겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OSM Route without API Key</title>
<style>
#map {
height: 100vh;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.min.js"></script>
<script>
// 지도 초기화
const map = L.map('map').setView([37.5665, 126.9780], 13);
// OpenStreetMap 타일 추가
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// 경로 계산 및 추가 (OSRM 서버 사용)
L.Routing.control({
waypoints: [
L.latLng(37.5665, 126.9780), // 시작점: 서울 시청
L.latLng(37.5547, 126.9706) // 도착점: 남산 타워
],
router: L.Routing.osrmv1({
}),
routeWhileDragging: true // 드래그 시 경로 갱신
}).addTo(map);
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| [JavaScript] 클래스와 객체 생성 (0) | 2024.12.16 |
|---|---|
| [JavaScript] 구조 분해 할당(Destructuring Assignment)으로 API 응답 처리하기 (2) | 2024.12.10 |
| [JavaScript] 커스텀 Promise로 비동기 동작 이해하기 (0) | 2024.12.04 |
| [JavaScript] 클로저(Closure)를 활용한 상태 유지 (0) | 2024.11.28 |
| [JavaScript] 이벤트 위임(Event Delegation)으로 동적 리스트 관리하기 (0) | 2024.11.22 |