wie Daten mit Marker in Flugblatt js übergeben werden

Question

Ich verwende Broschüre js mit openstreetmap in meinem Projekt.
Ich habe mehrere Kreismarkierer am selben Ort in meiner Karte.
Ich möchte einige ID in diesen Circlemarkers speichern, damit ich identifizieren kann, welche Daten beim Klicken auf CircleMarker referenziert werden sollen.

Mein circlemarker ist

var myMarker = L.circleMarker(myPoint, { title: 'unselected', radius: 20 }); 
myMarker.addTo(map); 

Here I Titel für andere Zwecke verwenden, das ist, warum ich es verwenden kann nicht.
Kann mir jemand einen Weg sagen, dies zu tun.

Answer 1

Es klingt, als ob Sie einer vorhandenen Klasse neue Funktionen (Funktionen, Eigenschaften usw.) hinzufügen möchten. Sinnvoll wäre es, hierfür objektorientierte Principals zu verwenden. Zu diesem Zweck empfehle ich Ihnen, die CircleMarker-Klasse zu erweitern, um diese Eigenschaften hinzuzufügen.

customCircleMarker = L.CircleMarker.extend({ 
    options: { 
     someCustomProperty: 'Custom data!', 
     anotherCustomProperty: 'More data!' 
    } 
}); 

Wenn Sie jetzt Ihre Kreismarkierung erstellen, erstellen Sie stattdessen eine Instanz Ihres erweiterten Objekts.

var myMarker = new customCircleMarker(myPoint, { 
    title: 'unselected', 
    radius: 20, 
    someCustomProperty: 'Adding custom data to this marker!', 
    anotherCustomProperty: 'More custom data to this marker!' 
}); 
myMarker.addTo(map); 

Jetzt können Sie die Eigenschaften wie Sie jede andere Option aus dem Marker bekommen. Dies ist nur ein einfacher Fall der Erweiterung, und Sie können mehr nach Bedarf ausführen, z. B. indem Sie dem Objekt weitere Eigenschaften oder Funktionen hinzufügen.

JSFiddle Beispiel: JSFiddle

Answer 2

nur das Bild zu vervollständigen, einen Handler zu erstellen, die auf einem Marker auf einen Mausklick reagieren und bieten Zugriff die neuen Optionen

function onMarkerClick(e) { 
    console.log("You clicked the marker " + e.target.options.someCustomProperty); 
    console.log("You clicked the marker " + e.target.options.anotherCustomProperty); 
} 
marker.on('click', onMarkerClick); 

Answer 3

Mit der aktuellen Version von Merkblatt (0.8-dev) können Sie einfach Ihre eigenen Eigenschaften auf dem Marker-Objekt selbst, ohne eine benutzerdefinierte Marker-Klasse zu erstellen ...

function map() { 
    return L.map('leaflet-canvas', 
    { 
     maxZoom: 10, 
     minZoom: 0, 
     crs: L.CRS.Simple 
    }); 
} 

var map = map().setView([0, 0], 10).on('click', onMapClick); 

function onMapClick(e) { 
    var marker = L.circleMarker(e.latlng, {draggable:true}); 

    marker.myCustomID = Math.floor((Math.random() * 100) + 1); 

    marker.on('click', onMarkerClick); 

    map.addLayer(marker); 

    // 'click' the new marker to show the ID when marker created 
    marker.fireEvent('click'); 
} 

function onMarkerClick(e) { 
    alert(e.target.myCustomID); 
} 

Answer 4

Marker ist im Grunde Javascript-Objekt-Ritus.

Unter Schnipsel lösen Sie meinen Fall einfach.

var marker = new L.marker([13.0102, 80.2157]).addTo(mymap).on('mouseover', onClick); 
    marker.key = "marker-1"; 

    var marker2 =new L.marker([13.0101, 80.2157]).addTo(mymap).on('mouseover', onClick); 
    marker2.key = "marker-2"; 

    function onClick(e) { 
    alert(this.key); // i can expect my keys here 
} 

Answer 5

Ich würde empfehlen, in Ihre Daten für Ihre Markierungen im Standard GeoJSON Format zu strukturieren, die für das direkte Speichern als Shape-Datei es kompatibel macht usw.

var myMarker = L.circleMarker(myPoint, { title: 'unselected', radius: 20 }); 
myMarker.properties.id = your_Id; 
myMarker.addTo(map); 

die gespeicherten Informationen abzurufen und zu tun mit ihm Dinge oder es auf andere Teile des Programms weitergeben, eine Beispielfunktion onclick zeigt:

eine Weile

myMarker.on('click',markerOnClick); 
function markerOnClick(e) { 
    my_ID = e.layer.properties.id; 
    console.log(my_ID, e.latlng); 
    // do whatever you want with my_ID 
} 

es hat mich die e.layer.properties wa, um herauszufinden, y, um auf die Eigenschaften des angeklickten Markers zuzugreifen, hoffe also, dass dies jemandem hilft. Die meisten anderen Beispiele konzentrierten sich nur darauf, den Breitengrad des Markers zu erhalten, e.latlng. Beachten Sie, dass Sie denselben Code auch mit einer ganzen Ebene/Gruppe von Markern verwenden können. Die Funktion wird für jeden einzelnen Marker funktionieren.