wake-up-neo.net

ID der Markierung im Merkblatt zuordnen

Ich versuche also, ein Ergebnis wie auf foursquare zu erzielen: https://foursquare.com/explore?cat=drinks&mode=url&near=Paris Wenn Sie also auf einer Markierung auf der Karte klicken, wird die Liste mit angezeigt Restaurants auf der rechten Seite des Bildschirms zum Ad-hoc-Restaurant und hebt es durch CSS hervor. Wenn Sie dagegen auf das Restaurant in der Liste klicken, wird es auf der Karte markiert.

Ich verwende Skobbler/Prospekt. Ich denke, ich kann dies erreichen, indem Sie CSS dynamisch ändern, wie in diesem Beispiel gezeigt: http://jsfiddle.net/gU4sw/7/ + ein Bildlauf zum Zielskript, das sich bereits auf der Seite befindet. 

Um dies zu erreichen, muss ich jedoch eine ID innerhalb der Marken vergeben (2 Marken unten): 

var marker = L.marker([52.52112, 13.40554]).addTo(map);
marker.bindPopup("Hello world!<br>I am a popup1.", { offset: new L.Point(-1, -41) }).openPopup();

var marker = L.marker([52.53552, 13.41994]).addTo(map);
marker.bindPopup("Hello world!<br>I am a popup2.", { offset: new L.Point(-1, -41) }).openPopup();

Frage ist: Wie kann ich eine Markierungs-ID zuweisen, um eine CSS-Änderung im entsprechenden Element auf meiner HTML-Seite auszulösen?

Mein Wissen über JS ist sehr begrenzt, aber vielleicht gibt es eine nette und einfache Lösung, thx 

19
lauWM

Ich habe nach einem schönen Weg gesucht, dies zu tun, und soweit ich das beurteilen kann, gibt es immer noch keine eingebaute Möglichkeit (mit Hilfe eines Flugblatts), um einem Marker eine ID zu geben. Ich weiß, dass ich zu spät komme, um dies zu beantworten, aber es wird hoffentlich anderen helfen, die auf diese Frage stoßen. Soweit ich das beurteilen kann, gibt es hier zwei Hauptprobleme:

Problem # 1: Wenn Sie Ihre Marker nicht in einem Objekt oder einer Map speichern (siehe unten), gibt es keine einfache programmatische Möglichkeit, auf sie später zuzugreifen. Zum Beispiel - Ein Benutzer klickt AUSSERHALB der Karte, die einer Markierung im Inneren der Karte entspricht.

Problem # 2: Wenn ein Benutzer auf einen Marker im Inneren der Karte klickt, gibt es keine Möglichkeit, die ID des Markers abzurufen und dann ein entsprechendes Element zu markieren oder eine Aktion AUSSERHALB auszulösen Karte. 

Lösungen

Die Verwendung einer oder mehrerer dieser Optionen hilft, die oben beschriebenen Probleme zu beheben. Ich fange mit dem in der vorherigen Antwort genannten an. Hier ist der Arbeitsstift , der den unten stehenden Code enthält.

Option # 1: Speichern Sie jeden Marker mit einer fest codierten oder dynamischen ID in einem Objekt -

// Create or retrieve the data
var data = [
    {
      name: 'Bob',
      latLng: [41.028, 28.975],
      id: '2342fc7'
    }, {...}, {...}
];

// Add an object to save markers
var markers = {};

// Loop through the data
for (var i = 0; i < data.length; i++) {
  var person = data[i];

  // Create and save a reference to each marker
  markers[person.id] = L.marker(person.latLng, {
    ...
  }).addTo(map);
}

Ähnlich wie bei der anderen Antwort können Sie jetzt mit -.__ auf eine einzelne Marke zugreifen.

var marker = markers.2342fc7; // or markers['2342fc7']

Option 2:

Während das Merkblatt keine integrierte 'id'-Option für Markierungen enthält, können Sie dem Element eine ID direkt hinzufügen, indem Sie auf ._icon property: .__ zugreifen.

// Create and save a reference to each marker
markers[person.id] = L.marker(person.latLng, {...}).addTo(map);

// Add the ID
markers[person.id]._icon.id = person.id;

Wenn Sie nun mit Click-Ereignissen umgehen, können Sie die Kennung dieser Marke ganz einfach erhalten:

$('.leaflet-marker-icon').on('click', function(e) {
   // Use the event to find the clicked element
   var el = $(e.srcElement || e.target),
       id = el.attr('id');

    alert('Here is the markers ID: ' + id + '. Use it as you wish.')
});

Option # 3:

Ein anderer Ansatz wäre die Verwendung der layerGroup-Schnittstelle. Es gibt eine Methode, getLayer, die klingt, als wäre es perfekt, wenn Sie unsere Marker mithilfe einer ID erhalten. Zu diesem Zeitpunkt bietet Leaflet jedoch keine Möglichkeit, eine benutzerdefinierte ID oder einen Namen anzugeben. Dieses issue auf Github beschreibt, wie dies getan werden sollte. Sie können jedoch die automatisch generierte ID eines Markers (oder iLayer für diese Angelegenheit) wie folgt erhalten und speichern:

var group = L.layerGroup()

people.forEach(person => {
    // ... create marker
    group.addLayer( marker );
    person.marker_id = group.getLayerId(marker)
})

Da nun die Kennung jedes Markers mit jedem Sicherungsobjekt in unserem Datenfeld gespeichert ist, können Sie den Markierer später leicht wie folgt erhalten:

group.getLayer(person.marker_id)

Ein vollständiges Beispiel finden Sie unter dieser Stift .

Option # 4:

Der sauberste Weg, dies zu tun, ist , wenn Sie die Zeit haben, die Marker-Klasse des Flugblatts zu erweitern, um Ihre individuellen Bedürfnisse sauber zu behandeln. Sie können entweder eine ID zu den Optionen hinzufügen oder benutzerdefiniertes HTML in die Markierung einfügen, die Ihre ID/Klasse enthält. Weitere Informationen hierzu finden Sie in der Dokumentation .

Sie können auch den circleMarker verwenden, der in den Pfadoptionen eine Option für className enthält, die für das Gruppieren ähnlicher Marker Nice sein kann.

Styling:

Ich habe fast vergessen, dass Ihre ursprüngliche Frage zum Zwecke des Stylings gestellt wurde. Verwenden Sie einfach die ID, um auf einzelne Elemente zuzugreifen:

.leaflet-marker-icon#2342fc7 { ... }

Fazit

Ich möchte auch erwähnen, dass Layer- und Feature-Gruppen eine weitere großartige Möglichkeit bieten, mit Markern zu interagieren. Hier ist ein Frage , das dies ein wenig bespricht. Fühlen Sie sich frei, mit dem ersten oder zweiten Stift zu basteln, und kommentieren Sie, wenn ich etwas verpasst habe.

33
Skip Jack

Eine einfache Möglichkeit, dies zu tun, besteht darin, alle Marker einer Liste mit einer eindeutigen ID hinzuzufügen.

var markersObject = {};
markersObject["id1"] = marker1;
markersObject["id2"] = marker2;
markersObject["id3"] = marker3;

Wenn die Liste der Restaurants eine Eigenschaft im HTML-Element eines einzelnen Restaurants hat, die der ID der hinzugefügten Markierung entspricht. So etwas wie:

<a href="#" id="singleRestaurantItem" data-restaurantID="id1" data-foo="bar">Click</a>

Fügen Sie dann das Klickereignis hinzu, bei dem Sie die ID des Restaurants übergeben (in diesem Fall "data-restaurantID"), und führen Sie Folgendes aus:

markersObject["passedValueFromTheClickedElement"].openPopup();

Sobald Sie auf den Eintrag in der Liste klicken, wird ein Popup mit Markierungen geöffnet, um anzuzeigen, wo sich das Restaurant auf der Karte befindet.

6
Marko Letic
var MarkerIcon = L.Icon.extend({
    options: {
        customId: "",
        shadowUrl: 'leaf-shadow.png',
        iconSize: [64, 64],
        shadowSize: [50, 64],
        iconAnchor: [22, 94],
        shadowAnchor: [4, 62],
        popupAnchor: [-3, -76]
    }
});

var greenIcon = new MarkerIcon({iconUrl: "/resources/images/marker-green.png"}),            
    redIcon = new MarkerIcon({iconUrl: "/resources/images/marker-red.png"}),
    orangeIcon = new MarkerIcon({iconUrl: "/resources/images/marker-orange.png"});

var mymap = L.map('mapid').setView([55.7522200, 37.6155600], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    id: 'mapbox.streets'
}).addTo(mymap);

// добавить маркер
L.marker([55.7522200, 37.6155600], {customId:"010000006148", icon: greenIcon, title:setMarkerTitle("010000006148")}).addTo(mymap).on('click', markerOnClick);
L.marker([55.7622200, 37.6155600], {customId:"010053166625", icon: redIcon, title: setMarkerTitle("010053166625")}).addTo(mymap).on('click', markerOnClick);

function markerOnClick(e) {
    var customId = this.options.customId;
    document.location.href = "/view/abonents/" + customId;
}

function setMarkerTitle(customId){
    var result = customId;
    result += "\nline2 ";
    result += "\nline3 ";
    return result;
}
3
Slava84

Für meinen Fall fand ich die beste Möglichkeit, einfach eine eindeutige ID zu generieren und an das Optionsobjekt von L.marker zu übergeben, wenn ich es erstelle.

const newMarker = L.marker([lat, lng], {uniqueID: uniqueID})

Sie können diese Markierung dann zu einem Merkblatt layerGroup hinzufügen.

const newLayerGroup = L.layerGroup().addTo(map);
newLayerGroup.addLayer(newMarker);

Sie können auf die ID mit layer.options.uniqueID zugreifen. Dadurch kann ich die Markierung später finden und bearbeiten. Alles, was ich brauche, ist .eachLayer() und die uniqueID.

Mein Backend (Cloud Firestore) generiert bereits eindeutige Dokument-IDs. Dadurch ist es sehr einfach, meine Leaflet-Karte und mein Backend in Echtzeit zu synchronisieren, anstatt die gesamte layerGroup neu zu erstellen und erneut bereitzustellen oder die Seite zu aktualisieren.

//e.g. a callback which fires whenever a doc has been removed from my db

newLayerGroup.eachLayer((layer) => {
  if (deletedDocID === layer.options.uniqueID) {
    newLayerGroup.removeLayer(layer);
  }
});
0
Brendan McGill