JavaScript
[JavaScript] OpenStreetMap지도에서 두 지점의 경로 출력
teamnova
2024. 12. 8. 00:02
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>
