LeafletJS - Marker

Um einen einzelnen Ort auf der Karte zu markieren, enthält die Broschüre Markierungen. Diese Markierungen verwenden ein Standardsymbol und diese Symbole können angepasst werden. In diesem Kapitel erfahren Sie, wie Sie Markierungen hinzufügen und anpassen, animieren und entfernen.

Hinzufügen eines einfachen Markers

Führen Sie die folgenden Schritte aus, um einer Karte mithilfe der Leaflet JavaScript-Bibliothek einen Marker hinzuzufügen:

Step 1 - Erstellen Sie eine MapObjekt durch Übergeben eines < div > -Elements (Zeichenfolge oder Objekt) und Zuordnungsoptionen (optional).

Step 2 - Erstellen Sie eine Layer Objekt durch Übergeben der URL der gewünschten Kachel.

Step 3 - Fügen Sie das Layer-Objekt mit der Taste zur Karte hinzu addLayer() Methode der Map Klasse.

Step 4 - Instanziieren Sie die Marker Klasse durch Bestehen eines latlng Objekt, das die zu markierende Position darstellt, wie unten gezeigt.

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

Step 5 - Fügen Sie das in den vorherigen Schritten erstellte Markierungsobjekt mit der Karte zur Karte hinzu addTo() Methode der Marker Klasse.

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

Beispiel

Der folgende Code setzt die Markierung für die Stadt Hyderabad (Indien).

<!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>

Es generiert die folgende Ausgabe -

Popups an den Marker binden

Führen Sie die folgenden Schritte aus, um ein einfaches Popup mit einer Nachricht an eine Markierung zu binden:

Step 1 - Erstellen Sie eine MapObjekt durch Übergeben eines < div > -Elements (Zeichenfolge oder Objekt) und Zuordnungsoptionen (optional).

Step 2 - Erstellen Sie eine Layer Objekt durch Übergeben der URL der gewünschten Kachel.

Step 3 - Fügen Sie das Layer-Objekt mit der Taste zur Karte hinzu addLayer() Methode der Map Klasse.

Step 4 - Instanziieren Sie die Marker Klasse durch Bestehen eines latlng Objekt, das die zu markierende Position darstellt.

Step 5 - Befestigen Sie das Popup mit an der Markierung bindPopup() Wie nachfolgend dargestellt.

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

Step 6 - Zum Schluss fügen Sie die hinzu Marker Objekt, das in den vorherigen Schritten zur Karte mit dem erstellt wurde addTo() Methode der Marker Klasse.

Beispiel

Der folgende Code setzt die Markierung für die Stadt Hyderabad (Indien) und fügt ein Popup hinzu.

<!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>

Es wird die folgende Ausgabe generiert

Markierungsoptionen

Während Sie einen Marker erstellen, können Sie auch einen übergeben marker optionsVariable zusätzlich zum Latlang-Objekt. Mit dieser Variablen können Sie Werte für verschiedene Optionen der Markierung festlegen, z. B. Symbol, Ziehbar, Tastatur, Titel, Alt, zInsexOffset, Deckkraft, RiseOnHover, RiseOffset, Bereich, Ziehbar usw.

Um eine Karte mit Kartenoptionen zu erstellen, müssen Sie die folgenden Schritte ausführen:

Step 1 - Erstellen Sie eine MapObjekt durch Übergeben eines < div > -Elements (Zeichenfolge oder Objekt) und Zuordnungsoptionen (optional).

Step 2 - Erstellen Sie eine Layer Objekt durch Übergeben der URL der gewünschten Kachel.

Step 3 - Fügen Sie das Layer-Objekt mit der Taste zur Karte hinzu addLayer() Methode der Map Klasse.

Step 4 - Erstellen Sie eine Variable für markerOptions und geben Sie Werte für die erforderlichen Optionen an.

Ein ... kreieren markerOptions Objekt (es wird wie ein Literal erstellt) und legen Werte für die Optionen fest iconUrl und iconSize.

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

Step 5 - Instanziieren Sie die Marker Klasse durch Bestehen eines latlng Objekt, das die zu markierende Position und das Optionsobjekt darstellt, das im vorherigen Schritt erstellt wurde.

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

Step 6 - Zum Schluss fügen Sie die hinzu Marker Objekt, das in den vorherigen Schritten zur Karte mit dem erstellt wurde addTo() Methode der Marker Klasse.

Beispiel

Der folgende Code setzt die Markierung auf der Stadt Hyderabad (Indien). Diese Markierung kann angeklickt und mit dem Titel gezogen werdenMyLocation.

<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>

Es wird die folgende Ausgabe generiert

Benutzerdefinierte Markierungssymbole

Anstelle des von der Broschürenbibliothek bereitgestellten Standardsymbols können Sie auch ein eigenes Symbol hinzufügen. Mit den folgenden Schritten können Sie der Karte anstelle des Standard-Symbols ein benutzerdefiniertes Symbol hinzufügen.

Step 1 - Erstellen Sie eine MapObjekt durch Übergeben eines < div > -Elements (Zeichenfolge oder Objekt) und Zuordnungsoptionen (optional).

Step 2 - Erstellen Sie eine Layer Objekt durch Übergeben der URL der gewünschten Kachel.

Step 3 - Fügen Sie das Layer-Objekt mit der Taste zur Karte hinzu addLayer() Methode der Map Klasse.

Step 4 - Erstellen Sie eine Variable für markerOptions und geben Sie Werte für die erforderlichen Optionen an -

  • iconUrl - Als Wert für diese Option müssen Sie a übergeben String Objekt, das den Pfad des Bildes angibt, das Sie als Symbol verwenden möchten.

  • iconSize - Mit dieser Option können Sie die Größe des Symbols festlegen.

Note - Zusätzlich zu diesen können Sie Werte für andere Optionen festlegen, z. B. iconSize, shadowSize, iconAnchor, shadowAnchor und popupAnchor.

Erstellen Sie ein benutzerdefiniertes Symbol mit L.icon() indem Sie die obige Optionsvariable wie unten gezeigt übergeben.

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

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

Step 5- Erstellen Sie eine Variable für markerOptions und geben Sie Werte für die erforderlichen Optionen an. Geben Sie zusätzlich das Symbol an, indem Sie die im vorherigen Schritt erstellte Symbolvariable als Wert übergeben.

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

Step 6 - Instanziieren Sie die Marker Klasse durch Bestehen eines latlng Objekt, das die zu markierende Position und das im vorherigen Schritt erstellte Optionsobjekt darstellt.

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

Step 7 - Zum Schluss fügen Sie die hinzu Marker Objekt, das in den vorherigen Schritten zur Karte mit dem erstellt wurde addTo() Methode der Marker Klasse.

Beispiel

Der folgende Code setzt die Markierung an der Position von Tutorialspoint. Hier verwenden wir das Logo von Tutorialspoint anstelle der Standardmarkierung.

<!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>

Es wird die folgende Ausgabe generiert

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