Mehr

Durchlaufen eines Marker-Clusters mit Leafletjs

Durchlaufen eines Marker-Clusters mit Leafletjs


Ich habe so eine Variable

var cubbon = new L.MarkerClusterGroup()

Dann habe ich dieser Variable viele Markierungen hinzugefügt. jetzt erstelle ich gerne eine Funktion () und
Schleifen Sie die Variable durch und finden Sie eine Markierung mit einem Breitengrad von 12.962.

Sobald ich den Marker gefunden habe, verwende ich gerne die Methode openPopup (), um das Popup-Fenster auf dem Marker zu öffnen.

Ich möchte, dass diese Schleife ausgeführt wird, wenn ich auf eine Schaltfläche klicke.


Hier ist mein Codeprozess…

Zielsetzung: Klicken Sie auf eine 'html'-Schaltfläche, damit ein Marker (mit Breitengrad = 12.962 & Längengrad = 77.168), der sich innerhalb der 'Marker-Cluster-Gruppe' befindet, sein Popup automatisch öffnen sollte.

//Erzeuge eine Marker-Cluster-Variable mit dem Namen 'parks' var allParks = new L.MarkerClusterGroup({ maxClusterRadius: 20,spiderfyOnMaxZoom: true, showCoverageOnHover: false, zoomToBoundsOnClick: true}); // jetzt erstelle ich einzelne Marker und füge sie schließlich der 'allParks'-Variablen hinzu. var parkA = L.marker(new L.LatLng(13.234, 76.321); parkA.bindPopup("Hier der parkA"); var parkB = L.marker(new L.LatLng(13.325, 76.675); parkB.bindPopup(" Hier der parkB"); var parkC = L.marker(new L.LatLng(12.962, 77.168); parkC.bindPopup("Hier der parkD"); //Jetzt füge ich alle diese Marker der 'allParks'-Variablen hinzu. allParks. addLayer(parkA); allParks.addLayer(parkB); allParks.addLayer(parkC); // so habe ich viele Park's erstellt und schlussendlich zur Variable 'allParks' hinzugefügt //Jetzt, wie bereits erwähnt, auf Knopfdruck Die folgende Funktion sollte ausgelöst werden, die die Marker-Cluster-Variable (allParks) durchlaufen und den Park herausfinden (mit lat=12.962,long=77.168) und sein Popup auf der Karte öffnen. //hier versuche ich und scheitere .ich verwende die 'eachlayer'-Methode, um allParks.eachLayer(function (layer) { if(((layer.getLatLng().lat)=12.962) && ((layer.getLatLng().lng)=77.168)) {layer.openPopup();}});

Können Sie mir helfen, diese Variable zu durchlaufen und nur den Park herauszufinden, der die Bedingung erfüllt, und sein Popup auf der Karte öffnen?


Es könnte eine späte Antwort sein, aber ich hatte vor ein paar Tagen die gleichen Anforderungen und konnte über das Internet keine anständige Lösung finden, also mache ich meine eigene, die meiner Meinung nach ziemlich sauber ist und nicht mit TypeScript kompatibel ist Regeln und Vorschriften.

@Component({ selector: "client-home", templateUrl: "./home.component.html", styleUrls: ["./home.component.scss"] }) export class MyComponent implementiert OnInit { private _map : L. Karte; // Angenommen, Sie haben hier die Kartenreferenz private _markers : L.Marker[] = []; // Angenommen, Sie haben die Marker in diesem Array private _cluster : L.markerClusterGroup; // Möglicherweise haben Sie dies irgendwo in Ihrem Code getan (ngOnInit in meinem Fall): public ngOnInit() { this.cluster = L.markerClusterGroup({ animate : false, // Ich wollte die Animationen nicht, also habe ich sie deaktiviert }); this.cluster.addLayers(this._markers); this._map.addLayer(this.cluster); } // Diese Methode findet den Cluster, der den spezifischen Breiten-/Längengrad in seinen Grenzen hat (das war mein Ziel) public onPropertyObjectMouseEnter(location : { latitude : number, longitude : number }) { // Schleife durch jede Ebene auf der Karte this._map.eachLayer((layer : L.Layer) => { // Wenn der Layer ein Marker-Cluster-Objekt ist if (layer instanceof L.MarkerCluster) { // Die Variable "layer" ist ein Cluster-Marker. Machen Sie hier, was immer Sie brauchen :) // Sie müssen sich keine Sorgen um den unteren Code machen (ich habe gemäß meiner Anforderung überprüft, ob der Standort in dieser Clustermarkierung enthalten ist oder nicht) let clusterHasTheLocation = layer.getBounds().contains({ lat : location. latitude, lng : location.longitude }); if (clusterHasTheLocation) { layer.getElement().classList.add("highlight"); falsch zurückgeben; // Beende die .eachLayer-Schleife } } }); } }

Es gibt einen Fehler in Ihren Gleichheitstests, Sie machen Affektiertheit statt Vergleich. Verwenden Sie das Triple- oder Double-Equal, aber nicht das Single:

allParks.eachLayer(function (layer) { if ( layer.getLatLng().lat === 12.962 && layer.getLatLng().lng === 77.168 ){ layer.openPopup(); }