아래 코드는 클릭 이벤트 발생 시 바로 새 탭을 띄우고 네이버 지도로 경로를 검색할 수 있는 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>클릭 이벤트로 네이버 지도에서 바로 경로 검색하기</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<style>
.btn{user-select: none; border: 1px solid #000;display: inline-block;padding: 10px;border-radius: 5px;}
.inputs,
.btn{margin-top: 20px;}
</style>
<!-- 교통 수단 선택 -->
<div class="transportation">
<div>
<input type="radio" id="car" name="transportation" value="car" checked />
<label for="car">자동차</label>
</div>
<div>
<input type="radio" id="transit" name="transportation" value="transit" />
<label for="transit">대중교통</label>
</div>
</div>
<!-- 위치 선택 -->
<div class="inputs">
<input id="departure" lat="37.4979526" lon="127.0276241" type="text" value="강남역">
<input id="stopover_1" lat="37.5133493" lon="127.1001866" type="text" value="잠실역">
<input id="stopover_2" lat="37.5715316" lon="126.9771079" type="text" value="광화문역">
<input id="destination" lat="37.5570155" lon="126.9240192" type="text" value="홍대입구역">
</div>
<div class="btn" id="direct_naver_map_search">Find Way</div>
<script>
$(document).on("click", "#direct_naver_map_search", function () {
// 경로 검색 시 필요한 데이터 모으기
const departure = encodeURIComponent($("#departure").val());
const destination = encodeURIComponent($("#destination").val());
const departureLat = $("#departure").attr("lat").trim();
const departureLng = $("#departure").attr("lon").trim();
const destinationLat = $("#destination").attr("lat").trim();
const destinationLng = $("#destination").attr("lon").trim();
const transportationType = $("input[name='transportation']:checked").val();
// 경유지 추가 여부를 확인하고 URL 생성에 필요한 문자열로 조합
const stopover1 = $("#stopover_1").val() ? `${$("#stopover_1").attr("lon")},${$("#stopover_1").attr("lat")},${encodeURIComponent($("#stopover_1").val())}` : '';
const stopover2 = $("#stopover_2").val() ? `${$("#stopover_2").attr("lon")},${$("#stopover_2").attr("lat")},${encodeURIComponent($("#stopover_2").val())}` : '';
const stopoverPart = stopover1 && stopover2 ? `/${stopover1}:${stopover2}` : stopover1 ? `/${stopover1}` : stopover2 ? `/${stopover2}` : '/-';
// URL 생성
const url = `https://map.naver.com/p/directions/${departureLng},${departureLat},${departure}/${destinationLng},${destinationLat},${destination}${stopoverPart}/${transportationType}?c=10.00,0,0,0,dh`;
// 새 탭에서 URL 열기
window.open(url, '_blank');
});
</script>
</body>
</html>주의 사항:
- 대중교통은 경유지를 추가할 수 없습니다.
경유지 추가 시 자동으로 자동차 경로로 검색됩니다. - 네이버 지도는 최대 5개의 경유지를 허용합니다.
아래 코드는 2개의 경유지만 추가하였으나 같은 방법으로 뒤에 경유지를 추가해 주시면 됩니다.
경로 검색을 위해서는 해당 주소의 경도와 위도를 알아야 합니다.
경도와 위도는 아래 링크를 참고 부탁드립니다. - 간결하고 짧은 코드보다는 빠르게 이해하실 수 있도록 코드가 많이 풀려있습니다.
코드 최적화는 GPT를 통하면 쉽게 진행하실 수 있습니다!
대한민국 - 주소영문변환 주소가
대한민국 도로명주소 우편번호 건물명 지번 주소영문변환 주소가
jusoga.com
728x90
반응형
'개발 > JS' 카테고리의 다른 글
| 자주 쓰는 기초 JS코드(JQuery 포함) 모음 (0) | 2024.11.13 |
|---|---|
| AOS(Animate On Scroll Library) 사용법 (0) | 2024.11.12 |
| Swiper 옵션 알아보기 (0) | 2024.11.11 |
| text-overflow: ellipsis;로 ... 처리(말 줄임 처리)되면 JS로 이벤트 발생하기 (2) | 2024.11.09 |
| history를 사용해 앱처럼 뒤로가기 (0) | 2024.10.10 |
