Más

Recorre un grupo de marcadores usando Leafletjs

Recorre un grupo de marcadores usando Leafletjs


Tengo una variable como esta

var cubbon = new L.MarkerClusterGroup ()

luego agregué muchos marcadores a esta variable. ahora me gusta crear una función () y
recorrer la variable y encontrar un marcador que tenga un valor de latitud de 12.962.

una vez que encuentro el marcador, me gusta usar el método openPopup () para abrir una ventana emergente en el marcador.

Quiero que este bucle se ejecute cuando hago clic en un botón.


Aquí está mi proceso de código ...

Objetivo: haga clic en un botón 'html', de modo que un marcador (con latitud = 12.962 y longitud = 77.168) que se encuentra dentro del 'grupo de clúster de marcadores' debe abrir su ventana emergente automáticamente.

// crea una variable de clúster de marcador con el nombre 'parques' var allParks = new L.MarkerClusterGroup ({maxClusterRadius: 20, spiderfyOnMaxZoom: true, showCoverageOnHover: false, zoomToBoundsOnClick: true}); // ahora creo marcadores individuales y finalmente los agrego a la variable 'allParks'. var parkA = L.marker (nuevo L.LatLng (13.234, 76.321); parkA.bindPopup ("Aquí el parkA"); var parkB = L.marker (nuevo L.LatLng (13.325, 76.675); parkB.bindPopup (" Aquí el parkB "); var parkC = L.marker (new L.LatLng (12.962, 77.168); parkC.bindPopup (" Aquí el parkD "); // Ahora agrego todos estos marcadores a la variable 'allParks'. AllParks. addLayer (parkA); allParks.addLayer (parkB); allParks.addLayer (parkC); // así creé muchos parques y finalmente los agregué al variable 'allParks' // Ahora, como se indicó anteriormente, con un clic de un botón la siguiente función debería dispararse, que recorre la variable de clúster de marcador (allParks) y descubre el parque (que tiene lat = 12.962, long = 77.168) y abre su ventana emergente en el mapa. // aquí es donde estoy intentando y fallando .Estoy usando el método 'eachlayer' para hacer un bucle en allParks.eachLayer (function (layer) {if (((layer.getLatLng (). lat) = 12.962) && ((layer.getLatLng (). lng) = 77.168)) {layer.openPopup ();}});

¿Me pueden ayudar a recorrer esa variable y descubrir solo el parque que cumple la condición y abrir su ventana emergente en el mapa?


Puede que sea una respuesta tardía, pero tenía los mismos requisitos hace unos días y no pude encontrar ninguna solución decente en Internet, así que termino haciendo la mía, que creo que es bastante limpia y no funciona con TypeScript. Reglas y regulaciones.

@Component ({selector: "client-home", templateUrl: "./home.component.html", styleUrls: ["./home.component.scss"]}) export class MyComponent implementa OnInit {private _map: L. Mapa; // Suponiendo que tiene la referencia del mapa aquí private _markers: L.Marker [] = []; // Suponiendo que tiene los marcadores en esta matriz private _cluster: L.markerClusterGroup; // Probablemente hayas hecho esto en algún lugar de tu código (ngOnInit en mi caso): public ngOnInit () {this.cluster = L.markerClusterGroup ({animate: false, // No quería las animaciones, así que las desactivé }); this.cluster.addLayers (this._markers); this._map.addLayer (this.cluster); } // Este método encontrará el clúster que tiene la latitud / longitud específica en sus límites (este era mi objetivo) public onPropertyObjectMouseEnter (location: {latitude: number, longitude: number}) {// Recorre cada capa en el mapa this._map.eachLayer ((layer: L.Layer) => {// Si la capa es un objeto de clúster de marcador if (instancia de capa de L.MarkerCluster) {// La variable "layer" es un marcador de clúster. Haga lo que necesite aquí :) // No necesita preocuparse por el código inferior (lo hice según mi requisito de verificar si la ubicación se incluye en este marcador de clúster o no) deje clusterHasTheLocation = layer.getBounds (). Contains ({lat: location. latitud, lng: ubicación.longitud}); if (clusterHasTheLocation) {layer.getElement (). classList.add ("resaltar"); falso retorno; // Salir del bucle .eachLayer}}}); }}

Hay un error en tus pruebas de igualdad, haces afectación en lugar de comparación. Utilice el triple o doble igual, pero no el sencillo:

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