페이지의 지도

학교, 여행, 현장 등을 위해 핀이 있는 대화형 지도를 웹사이트에 추가해.

보여줄게: 전단지 – 무료 지도

전단지는 수백만 개의 웹사이트에서 지도를 표시하기 위해 사용하는 라이브러리야. 무료이며<head>:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

그런 다음 지도 상자와 몇 줄의 JavaScript만 있으면 돼.

<div id="mapa" style="height: 400px; border-radius: 12px;"></div>

<script>
  // Coordinates for the map's center and zoom level (bigger number = closer)
  const mapa = L.map('mapa').setView([49.19, 16.61], 13);

  // Map tiles from OpenStreetMap (free)
  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap',
  }).addTo(mapa);

  // A pin with a popup
  L.marker([49.19, 16.61])
    .addTo(mapa)
    .bindPopup('<strong>We are here!</strong>');
</script>

3단계: 지도 만들기, 기본 레이어 추가, 핀 배치. 원하는 만큼 핀을 추가할 수 있어. 반복해.L.marker.

💡

**라이브러리**는 다른 사람이 작성한 코드를 빌려서 작성한 코드이므로 모든 내용을 직접 작성할 필요가 없어. Leaflet은 패닝, 확대/축소, 모바일 터치 제스처를 자동으로 처리해. 지도에 무엇을 표시할지 알려주기만 하면 돼.

목록에서 더 많은 핀 보기

여러 장소가 있는 경우 날씨와 마찬가지로 배열에 저장하고 반복해.

const mista = [
  { nazev: 'Šumava 2025', lat: 49.06, lng: 13.61 },
  { nazev: 'Lipno – camping trip', lat: 48.63, lng: 14.23 },
  { nazev: 'Prague – school trip', lat: 50.09, lng: 14.42 },
];

for (const misto of mista) {
  L.marker([misto.lat, misto.lng]).addTo(mapa).bindPopup(misto.nazev);
}

네 차례 💪

🏫 학교 웹사이트 – 솔루션

"연락처" 페이지에 학교 위치가 표시된 지도. 보너스: 체육 수업에 사용되는 체육관이나 운동장용 두 번째 핀.

🙋 개인 웹사이트 – 솔루션

"내 장소" 지도: 너이 살고 있는 곳(대략 도시 한 군데이면 충분해!), 너이 가장 좋아하는 놀이터, 휴가를 가는 곳야.

🌍 여행 일지 - 솔루션

이것은 네 가장 중요한 교훈야: 목록의 핀으로 모든 여행을 지도로 표시하는 것야. 각 팝업은 여행 기록으로 연결될 수 있어.

⚽ 클럽 웹사이트 – 솔루션

"우리가 플레이하는 곳" 맵: 홈 필드 + 상대 필드. 방문하시는 부모님들이 좋아하실 것 같아요.

⚠️

**개인정보 보호:** 웹사이트에 정확한 집 주소를 절대 입력하지 마세요. 마을의 중앙 광장에 핀 하나만 있어도 충분해.

✅

**확인:** 웹사이트에 팝업이 포함된 핀이 2개 이상 있는 이동 및 확대/축소 가능한 지도가 있어.

이번 수업에서 배울 점

라이브러리(예: Leaflet)는 미리 만들어진 초능력을 빌려줍니다.
지도 = 지도 + 기본 레이어 + 핀.
배열의 장소 목록 + 루프 = 모든 크기의 지도.

이 수업은 유료 레벨의 일부입니다

보여줄게: 전단지 – 무료 지도

목록에서 더 많은 핀 보기

네 차례 💪

이번 수업에서 배울 점