LeafletJS-마커

지도에서 단일 위치를 표시하기 위해 전단지는 마커를 제공합니다. 이러한 마커는 표준 기호를 사용하며 이러한 기호는 사용자 정의 할 수 있습니다. 이 장에서는 마커를 추가하는 방법과 마커를 사용자 지정, 애니메이션 및 제거하는 방법에 대해 설명합니다.

간단한 마커 추가

Leaflet JavaScript 라이브러리를 사용하여지도에 마커를 추가하려면 아래 단계를 따르십시오.

Step 1 − 만들기 Map< div > 요소 (문자열 또는 개체) 및지도 옵션 (선택 사항) 을 전달하여 개체.

Step 2 − 만들기 Layer 원하는 타일의 URL을 전달하여 개체.

Step 3 −지도에 레이어 개체를 추가하려면 addLayer() 의 방법 Map 수업.

Step 4 − 인스턴스화 Marker 클래스를 전달하여 latlng 다음과 같이 표시 할 위치를 나타내는 개체입니다.

// Creating a marker
var marker = new L.Marker([17.385044, 78.486671]);

Step 5 − 이전 단계에서 생성 한 마커 개체를 addTo() 의 방법 Marker 수업.

// Adding marker to the map
marker.addTo(map);

예

다음 코드는 Hyderabad (인도)라는 도시에 마커를 설정합니다.

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet sample</title>
      <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   </head>
   
   <body>
      <div id = "map" style = "width:900px; height:580px"></div>
      <script>
         // Creating map options
         var mapOptions = {
            center: [17.385044, 78.486671],
            zoom: 10
         }
         // Creating a map object
         var map = new L.map('map', mapOptions);
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         
         // Adding layer to the map
         map.addLayer(layer);
         
         // Creating a marker
         var marker = L.marker([17.385044, 78.486671]);
         
         // Adding marker to the map
         marker.addTo(map);
      </script>
   </body>
   
</html>

다음 출력을 생성합니다-

마커에 팝업 바인딩

메시지를 표시하는 간단한 팝업을 마커에 바인딩하려면 아래 단계를 따르십시오.

Step 1 − 만들기 Map< div > 요소 (문자열 또는 개체) 및지도 옵션 (선택 사항) 을 전달하여 개체.

Step 2 − 만들기 Layer 원하는 타일의 URL을 전달하여 개체.

Step 3 −지도에 레이어 개체를 추가하려면 addLayer() 의 방법 Map 수업.

Step 4 − 인스턴스화 Marker 클래스를 전달하여 latlng 표시 할 위치를 나타내는 개체입니다.

Step 5 − 다음을 사용하여 마커에 팝업을 첨부합니다. bindPopup() 아래 그림과 같이.

// Adding pop-up to the marker
marker.bindPopup('Hi Welcome to Tutorialspoint').openPopup();

Step 6 − 마지막으로 Marker 이전 단계에서 만든 개체를 사용하여지도에 addTo() 의 방법 Marker 수업.

예

다음 코드는 하이데라바드 (인도) 도시에 마커를 설정하고 팝업을 추가합니다.

<!DOCTYPE html>
<html>
   <head>
      <title>Binding pop-Ups to marker</title>
      <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   </head>
   
   <body>
      <div id = "map" style = "width:900px; height:580px"></div>
      <script>
         // Creating map options
         var mapOptions = {
            center: [17.385044, 78.486671],
            zoom: 15
         }
         var map = new L.map('map', mapOptions); // Creating a map object
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer);         // Adding layer to the map
         var marker = L.marker([17.438139, 78.395830]);    // Creating a Marker
         
         // Adding popup to the marker
         marker.bindPopup('This is Tutorialspoint').openPopup();
         marker.addTo(map); // Adding marker to the map
      </script>
   </body>
   
</html>

다음 출력을 생성합니다.

마커 옵션

마커를 만드는 동안 marker optionslatlang 객체 외에 변수. 이 변수를 사용하여 아이콘, 드래그 가능, 키보드, 제목, alt, zInsexOffset, opacity, riseOnHover, riseOffset, pane, dragable 등과 같은 마커의 다양한 옵션에 값을 설정할 수 있습니다.

지도 옵션을 사용하여지도를 만들려면 아래 단계를 따라야합니다.

Step 1 − 만들기 Map< div > 요소 (문자열 또는 개체) 및지도 옵션 (선택 사항) 을 전달하여 개체.

Step 2 − 만들기 Layer 원하는 타일의 URL을 전달하여 개체.

Step 3 −지도에 레이어 개체를 추가하려면 addLayer() 의 방법 Map 수업.

Step 4 − markerOptions에 대한 변수를 생성하고 필요한 옵션에 값을 지정합니다.

만들기 markerOptions 개체 (리터럴처럼 생성됨) 및 옵션 값 설정 iconUrl 과 iconSize.

// Options for the marker
var markerOptions = {
   title: "MyLocation",
   clickable: true,
   draggable: true
}

Step 5 − 인스턴스화 Marker 클래스를 전달하여 latlng 표시 할 위치를 나타내는 개체와 이전 단계에서 만든 옵션 개체입니다.

// Creating a marker
var marker = L.marker([17.385044, 78.486671], markerOptions);

Step 6 − 마지막으로 Marker 이전 단계에서 만든 개체를 사용하여지도에 addTo() 의 방법 Marker 수업.

예

다음 코드는 도시 하이데라바드 (인도)에 마커를 설정합니다. 이 마커는 클릭 가능하고 제목과 함께 드래그 가능합니다.MyLocation.

<html>
   <head>
      <title>Marker Options Example</title>
      <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   </head>
   
   <body>
      <div id = "map" style = "width:900px; height:580px"></div>
      <script>
         // Creating map options
         var mapOptions = {
            center: [17.385044, 78.486671],
            zoom: 10
         }
         // Creating a map object
         var map = new L.map('map', mapOptions);
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
        
         // Adding layer to the map
         map.addLayer(layer);
         
         // Creating a Marker
         var markerOptions = {
            title: "MyLocation",
            clickable: true,
            draggable: true
         }
         // Creating a marker
         var marker = L.marker([17.385044, 78.486671], markerOptions);
         
         // Adding marker to the map
         marker.addTo(map);
      </script>
   </body>
   
</html>

다음 출력을 생성합니다.

마커 사용자 지정 아이콘

Leaflet 라이브러리에서 제공하는 기본 아이콘 대신 자신 만의 아이콘을 추가 할 수도 있습니다. 다음 단계를 사용하여 기본 아이콘 대신지도에 사용자 지정 아이콘을 추가 할 수 있습니다.

Step 1 − 만들기 Map< div > 요소 (문자열 또는 개체) 및지도 옵션 (선택 사항) 을 전달하여 개체.

Step 2 − 만들기 Layer 원하는 타일의 URL을 전달하여 개체.

Step 3 −지도에 레이어 개체를 추가하려면 addLayer() 의 방법 Map 수업.

Step 4 − 다음에 대한 변수 생성 markerOptions 필요한 옵션에 값을 지정하십시오-

  • iconUrl −이 옵션에 대한 값으로 String 아이콘으로 사용하려는 이미지의 경로를 지정하는 객체입니다.

  • iconSize −이 옵션을 사용하여 아이콘의 크기를 지정할 수 있습니다.

Note −이 외에도 iconSize, shadowSize, iconAnchor, shadowAnchor 및 popupAnchor와 같은 다른 옵션에 값을 설정할 수도 있습니다.

다음을 사용하여 사용자 지정 아이콘 만들기 L.icon() 아래와 같이 위의 옵션 변수를 전달합니다.

// Icon options
var iconOptions = {
   iconUrl: 'logo.png',
   iconSize: [50, 50]
}

// Creating a custom icon
var customIcon = L.icon(iconOptions);

Step 5− markerOptions에 대한 변수를 생성하고 필요한 옵션에 값을 지정합니다. 이 외에도 이전 단계에서 만든 아이콘 변수를 값으로 전달하여 아이콘을 지정합니다.

// Options for the marker
var markerOptions = {
   title: "MyLocation",
   clickable: true,
   draggable: true,
   icon: customIcon
}

Step 6 − 인스턴스화 Marker 클래스를 전달하여 latlng 표시 할 위치를 나타내는 개체와 이전 단계에서 만든 옵션 개체입니다.

// Creating a marker
var marker = L.marker([17.438139, 78.395830], markerOptions);

Step 7 − 마지막으로 Marker 이전 단계에서 만든 개체를 사용하여지도에 addTo() 의 방법 Marker 수업.

예

다음 코드는 Tutorialspoint 위치에 마커를 설정합니다. 여기서는 기본 마커 대신 Tutorialspoint 로고를 사용하고 있습니다.

<!DOCTYPE html>
<html>
   <head>
      <title>Marker Custom Icons Example</title>
      <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   </head>
   
   <body>
      <div id = "map" style = "width:900px; height:580px"></div>
      <script>
         // Creating map options
         var mapOptions = {
            center: [17.438139, 78.395830],
            zoom: 10
         }
         // Creating a map object
         var map = new L.map('map', mapOptions);
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

         // Adding layer to the map
         map.addLayer(layer);
         
         // Icon options
         var iconOptions = {
            iconUrl: 'logo.png',
            iconSize: [50, 50]
         }
         // Creating a custom icon
         var customIcon = L.icon(iconOptions);
         
         // Creating Marker Options
         var markerOptions = {
            title: "MyLocation",
            clickable: true,
            draggable: true,
            icon: customIcon
         }
         // Creating a Marker
         var marker = L.marker([17.438139, 78.395830], markerOptions);
         
         // Adding popup to the marker
         marker.bindPopup('Hi welcome to Tutorialspoint').openPopup();
         
         // Adding marker to the map
         marker.addTo(map);
      </script>
   </body>
   
</html>

다음 출력을 생성합니다.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved