it-swarm.com.de

wie man Daten mit Marker in Flugblatt js übergibt

Ich verwende in meinem Projekt Flugblatt-Js mit Openstreetmap.
Ich habe mehrere Markierungen an derselben Stelle in meiner Karte.
Ich möchte einige IDs in diesen Sicherungsmarken speichern, damit ich feststellen kann, welche Daten beim Klicken auf die Sicherungsmarke referenziert werden.

Mein Markenzeichen ist 

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

Hier verwende ich Titel für andere Zwecke, deshalb kann ich ihn nicht verwenden.
Kann mir jemand eine Möglichkeit geben, dies zu tun.

21
vaibhav shah

Es klingt so, als würden Sie einer vorhandenen Klasse neue Funktionen (Funktionen, Eigenschaften usw.) hinzufügen. Es wäre sinnvoll, dafür objektorientierte Prinzipien zu verwenden. Zu diesem Zweck würde ich empfehlen, dass Sie die CircleMarker-Klasse 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 jede andere Option von der Markierung abrufen. Dies ist nur ein einfacher Fall der Erweiterung, und Sie können bei Bedarf weitere Aktionen ausführen, z.

JSFiddle-Beispiel: JSFiddle

38
Patrick D

Mit der aktuellen Version des Merkblatts (0.8-dev) können Sie einfach Ihre benutzerdefinierten Eigenschaften für das Markierungsobjekt selbst festlegen, ohne eine benutzerdefinierte Markierungsklasse erstellen zu müssen.

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);
}
15
Stackman

nur um das Bild zu vervollständigen, erstellen Sie einen Handler, der auf einen Mausklick auf eine Markierung reagiert und die neuen Optionen zugänglich macht 

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);
4
geegee

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
}
3
Andi AR

Ich würde empfehlen, Ihre Daten für Ihre Marker im Standard-GeoJSON-Format zu strukturieren, wodurch sie zum direkten Speichern als Shapefile usw. kompatibel sind.

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

Um die gespeicherten Informationen abzurufen und damit umzugehen oder sie an andere Teile Ihres Programms weiterzuleiten, zeigen Sie eine Onclick-Beispielfunktion:

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
}

Ich habe eine Weile gebraucht, um herauszufinden, wie e.layer.properties auf die Eigenschaften der angeklickten Markierung zugegriffen werden kann. Ich hoffe, das hilft jemandem. Die meisten anderen Beispiele konzentrierten sich nur darauf, die Länge der Markierung e.latlng..__ zu ermitteln. Beachten Sie, dass Sie denselben Code auch für eine ganze Ebene/Gruppe von Markierungen verwenden können. Die Funktion funktioniert für jeden einzelnen Marker.

0
Nikhil VJ

Hier ist eine typenfreundlichere Methode:

DataMarker.ts

import * as L from 'leaflet';

export class DataMarker extends L.Marker {
  data: any;

  constructor(latLng: L.LatLngExpression, data: any, options?: L.MarkerOptions) {
    super(latLng, options);
    this.setData(data);
  }

  getData() {
    return this.data;
  }

  setData(data: any) {
    this.data = data;
  }
}

SomeOtherFile.ts

import { DataMarker } from './DataMarker';

const marker = new DataMarker([ lat, lng ], anyData, markerOptions);

-

Hinweis 1 : Ich habe mich entschieden, die Markeroptionen nicht mit der data - Eigenschaft zusammenzuführen

Hinweis 2 : Passen Sie den Datentyp an, wenn Sie etwas genaueres benötigen

0