728x90
안녕하세요,
오늘은 OpenStreetMap 지도를 출력하여 특정 위치에 마커를 찍고, 마커 클릭 시 마커 위에 팝업을 여는 예제를 만들어보도록 하겠습니다,
마커를 찍고자 하는 위치는 위도, 경도로 설정해야 합니다.
위도, 경도를 활용한 마커 찍는 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leaflet OpenStreetMap Marker 예제</title>
<style>
#map { height: 500px; width: 100%; }
</style>
</head>
<body>
<div id="map"></div> <!-- 지도가 표시될 요소 -->
<script>
// Leaflet를 사용한 지도 설정
const map = L.map('map').setView([37.5665, 126.9780], 13); // 서울 위치 및 줌 설정
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { // OSM 타일 추가
}).addTo(map);
// 특정 위치에 마커 추가
const targetLatLng = [37.480514102448545, 126.98402022805749]; // 마커 위치
const marker = L.marker(targetLatLng).addTo(map); // 마커 추가
// 팝업 내용 설정
marker.bindPopup("<b>여기입니다! 클릭하여 확대</b>");
// 마커 클릭 시 팝업 열기 및 이벤트 등록
marker.on("click", function () {
marker.openPopup(); // 팝업 열기
document.querySelector(".leaflet-popup-content").addEventListener("click", function() {
map.setView(targetLatLng, 17); // 클릭 시 줌 레벨 17로 확대
});
});
// 마커 위치로 포커스 이동
map.setView(targetLatLng, 15); // 줌 레벨 15로 포커스 이동
</script>
</body>
</html>
시연 영상입니다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] OpenStreetMap 지도 출력하여 특정 경로에 선 그리기 (2) | 2024.11.07 |
|---|---|
| [JavaScript] 세션 스토리지 사용해 간단한 퀴즈 상태 저장하기 (2) | 2024.11.06 |
| [JavaScript] 로컬스토리지 사용해 즐겨찾는 링크 저장하기 (0) | 2024.10.31 |
| [JavaScript] Leaflet를 활용한 OpenStreetMap 지도 출력하기 (2) | 2024.10.28 |
| [JavaScript] 스네이크 게임 완성도 올리기 (0) | 2024.10.25 |