0

Cordial saludo

La presente es para manifestar como puedo capturar el indice de mi ngFor, en un botón que se encuentra en el interior de un map-info-window, ya que siempre que trato de capturar el indice siempre me aparece el primero, solo necesito que el método borrarMarcador me pase solo el número del indice que seleccione sin repetirme el mismo.

introducir el código aquí  
 <google-map (mapClick)="agregarMarcador($event)" [center]="latlng" [zoom]="15" width="100%" height="500px">
  <map-marker *ngFor="let marker of marcadores;let i = index"  #ElementMarker="mapMarker" [position]="marker.latlng" (mapClick)="openInfoWindow(ElementMarker)">
    <map-info-window>
      <strong>{{ marker.titulo }}</strong>
      <p>
        {{ marker.desc }}
      </p>
      <div>
        <button mat-raised-button color="primary">Editar</button>
        <button mat-raised-button color="warn" (click)="borrarMarcador(i)" >Borrar</button>
      </div>
    </map-info-window>
  </map-marker>
</google-map>

Método de captura del indice

introducir el código aquí
borrarMarcador(i: number){
   console.log(i);
   // this.marcadores.splice(1, i);
   // this.guardarStorage();
 }

1 respuesta 1

1

El problema que veo es que generas un infowindow, por cada marcador y en el viewhild únicamente te regresara el primer elemento que encuentra.

No se que tan conveniente sea realizar varios infoIwindow ya que la documentación únicamente se genera un infowindow y se asigna cuando se va a mostrar.

Yo manejaría uno solo y el marcador seleccionado en una variable y cuando vaya a borrar manejar sobre esa, te dejo un ejemplo de como funciona y el código aquí.

https://codesandbox.io/s/magical-merkle-zz4qg?file=/src/index.html

app-component.html

<google-map (mapClick)="agregarMarcador($event)" [center]="latlng" [zoom]="9" width="100%" height="500px">
    <map-marker
      *ngFor="let marker of marcadores;let i = index"
      #ElementMarker="mapMarker" [position]="marker.latlng"
      (mapClick)="openInfoWindow(ElementMarker, i)">
    </map-marker>
    <map-info-window>
      <strong>{{ marker.titulo }}</strong>
      <p>
        {{ marker.desc }}
      </p>
      <div>
        <button mat-raised-button color="primary">Editar</button>
        <button mat-raised-button color="warn" (click)="borrarMarcador(i)">
          Borrar
        </button>
      </div>
    </map-info-window>
  </google-map>

app-component.ts

import { Component, ViewChild } from "@angular/core";
import { MapInfoWindow, MapMarker } from "@angular/google-maps";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  @ViewChild(MapInfoWindow) infoWindow: MapInfoWindow;
  title = "CodeSandbox";
  marcadores = [];
  latlng = { lat: 24, lng: 12 };
  marker: any = {};

  public agregarMarcador(event: any) {
    var marker = {
      latlng: event.latLng.toJSON(),
      titulo: "Uno",
      desc: "Prueba"
    };
    this.marcadores.push(marker);
  }

  public openInfoWindow(marker: MapMarker, i: number) {
    this.marker = marker.marker;
    this.infoWindow.open(marker);
  }

  public borrarMarcador() {
    // let idx = 0;
    let idx = this.marcadores.findIndex(
      (e) =>
        e.latlng.lat === this.marker.position.lat() &&
        e.latlng.lng === this.marker.position.lng()
    );
    this.marcadores.splice(idx, 1);
  }
}

1
  • Correcto compañero me sirvió demasiado la solución planteada de parte tuya, muchas gracias. Commented el 17 nov. 2020 a las 13:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.