Angular-google-maps: Tutup jendela info penanda ketika yang baru diklik?

Ya, saya pernah mengalami masalah yang sama sebelumnya.

Ini potongan yang berfungsi
http://plnkr.co/edit/cwuwBN?p=preview

saya tidak bisa menggunakan pendekatan ini.
Solusi saya mengunduh sumber dan menyertakan kode berikut di file (google-map-info-window.ts):

// setel properti ini di file teratas, di bawah let infoWindowId = 0; (baris 7)
biarkan infoWindowLastContext: SebmGoogleMapInfoWindow = null;

open (): Janji{
if (infoWindowLastContext! == null) {
this._infoWindowManager.close (infoWindowLastContext)
}

infoWindowLastContext = this;

return this._infoWindowManager.open(this);

}

Saya harap ini membantu...

Solusi satu-satunya template saya:

<sebm-google-map #gm [latitude]="lat" [longitude]="lng" [zoom]="zoom" [scrollwheel]="false" [styles]="mapStyles">
    <sebm-google-map-marker *ngFor="let place of places"
    [latitude]="place.point.lat"
    [longitude]="place.point.lng"
    [label]="place.name[0]"
    (markerClick)="gm.lastOpen?.close(); gm.lastOpen = infoWindow">
    <sebm-google-map-info-window #infoWindow>
        <strong>{{place.name}}</strong>
    </sebm-google-map-info-window>
</sebm-google-map-marker>

@soyersoyer @lazarljubenovic

<agm-map #gm [latitude]="lat" [longitude]="lng" [zoom]="zoom" [scrollwheel]="false" [styles]="mapStyles">
    <sebm-google-map-marker *ngFor="let place of places"
    [latitude]="place.point.lat"
    [longitude]="place.point.lng"
    [label]="place.name[0]"
    (markerClick)="gm.lastOpen?.close(); gm.lastOpen = infoWindow">
    <agm-info-window #infoWindow>
        <strong>{{place.name}}</strong>
    </agm-info-window>
</agm-marker>

Dengan 1.0.0-beta.0 baru - green-zebra AOT tidak berfungsi:
Properti 'lastOpen' tidak ada pada tipe 'AgmMap'

Apa yang bisa terjadi?

Berfungsi dengan baik, penggunaan templat saya memanggil fungsi klik khusus seperti pada

(markerClick)="gm.lastOpen?.close(); gm.lastOpen = infoWindow; markerClicked(m);"

Halo,

Bahkan dengan solusi @ Martin-B, itu tidak berhasil: /

Ada bantuan?

@ Martin-B terima kasih banyak atas solusinya. Bekerja dengan baik!

@ Martin-B Terima kasih!
@melbouhy Malu pada saya; lupa menambahkan #infoWindow di <agm-info-window> . Mungkin Anda melakukan kesalahan yang sama?

public openIW (data = undefined) {
if (this.IW) {
this.IW.close ();
}

this.IW = data;

}

@ Martin-B how to use this ((markerClick) = "gm.lastOpen? .Close (); gm.lastOpen = infoWindow; markerClicked (m);") di agm-marker tolong balas dengan kode .ts

@menakav Berikut adalah kode yang berfungsi:
dalam file .ts:
`
markerClicked (infoWindow) {
if (this.infoWindowOpened === infoWindow)
kembali;

    if(this.infoWindowOpened !== null)
    {
        this.infoWindowOpened.close();
    }

    this.infoWindowOpened = infoWindow;
}

in .html file: (markerClick) = "gm.lastOpen? .Close (); gm.lastOpen = infoWindow; markerClicked (m);" `

@menakav Kode Anda tidak bekerja untuk saya
:(

Saya menguji semua kode di forum ini, dan masalah saya adalah infoWindow diterima di sini:

  clickedMarker(infoWindow, index: number) {
    ...
  }

infoWindow selalu adalah yang pertama, tidak peduli berapa poin yang saya miliki. Saya selalu menerima infoWindow dengan _id = 0.

Parameter index menerima ID sebenarnya dari penanda yang diklik ....

Ini html saya:

<agm-marker *ngFor="let point of points; let i = index" [latitude]="point.latitude"
                            [longitude]="point.longitude"
                            [iconUrl]="iconUrl" (markerClick)="clickedMarker(infoWindow, i)">
<agm-info-window [disableAutoPan]="true" #infoWindow *ngIf="!isDetailMovil">
        <div class="marker__tittle">{{point.name}}</div>

Ada ide mengapa selalu datang infoWindow yang sama?

Solusi "hanya template"

@markschmid solusi saya ketika array agm-marker awal diganti.
(markerClick)="tmp=gm.lastOpen;gm.lastOpen=infoWindow;tmp?.close();"

Solusi saya, berdasarkan jawaban @lauwrentius :

* .html

<agm-marker 
    *ngFor="let marker of markers; let i = index"
    (markerClick)="showInfoWindow(infoWindow, i)"
>
    <agm-info-window #infoWindow></agm-info-window>
</agm-marker>

* .ts

infoWindowOpened = null;

filter() {
    infoWindowOpened = null;
    // redraw the map with filtered markers
}

showInfoWindow(infoWindow, index) {
    if (this.infoWindowOpened === infoWindow) {
        return;
    }

    if (this.infoWindowOpened !== null) {
        this.infoWindowOpened.close();
    }

    this.infoWindowOpened = infoWindow;   
}

@Tokopedia

Dapatkah Anda menjelaskan bagaimana Anda menjalankan filter(){infoWindowOpened = null;} tanpa menampilkan 'tidak dapat menemukan infoWindowOpened' sebagai kesalahan? Ini terjadi setelah mengubah larik ikon penanda.

Saya memecahkan masalah.
Saya membagikan kode:
(markerClick) = "clickedMarker (infoWindow, point, point.latitude, point.longitude)">

clickedMarker (data = undefined, currentPoint: any, lat: string, lng: string) {
if (this.IW) {
this.IW.close ();
}
detail const = data._infoWindowManager._infoWindows;
if (details.size> 0) {
details.forEach ((element, key) => {
if (key.hostMarker.latitude === lat && key.hostMarker.longitude === lng) {
this.IW = key;
}
});
}
}

Saya harap ini membantu.

Terima kasih.

Pada Sabtu, 28 Apr 2018 pukul 02:04, Cristian Hernandez [email protected]
menulis:

Saya memecahkan masalah.
Saya membagikan kode:
[latitude] = "point.latitude" [longitude] = "point.longitude"
[iconUrl] = "iconUrl" (markerClick) = "clickedMarker (infoWindow, titik,
point.latitude, point.longitude) "> [disableAutoPan] = "true" * ngIf = "! isDetailMovil">

clickedMarker (data = undefined, currentPoint: any, lat: string, lng:
string) {if (this.IW) {this.IW.close (); } detail const =
data._infoWindowManager._infoWindows; if (details.size> 0) {
details.forEach ((element, key) => {if (key.hostMarker.latitude === lat &&
key.hostMarker.longitude === lng) {this.IW = key; }}); }}

Saya harap ini membantu.

-
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub
https://github.com/SebastianM/angular-google-maps/issues/797#issuecomment-385086695 ,
atau nonaktifkan utasnya
https://github.com/notifications/unsubscribe-auth/AgIM0TGCgyHK-snaJdIlSZSQuq0MF1Ihks5ts4DDgaJpZM4LQ0M7
.

Inilah solusi saya. Bekerja dengan sudut 6.
HTML:

<agm-marker *ngFor="let marker of markers" [latitude]="marker.latitude"[longitude]="marker.longitude" (markerClick)="markerClick(infoWindow)">
<agm-info-window #infoWindow>
</agm-info-window>
</agm-marker>

TypeScript:

lastSelectedInfoWindow: any;
markerClick(infoWindow: any) {
        if (infoWindow == this.lastSelectedInfoWindow) {
            return;
        }
        if (this.lastSelectedInfoWindow != null) {
         try{
            this.lastSelectedInfoWindow.close();
          } catch {} //in case if you reload your markers
        }
        this.lastSelectedInfoWindow = infoWindow;
    }

Setelah penelitian yang panjang dan solusi yang tidak jelas, akhirnya mendapatkan solusi yang bagus untuk menghapus agm-info-window sebelumnya ketika yang baru dibuka

Ini adalah component.html saya:

 <agm-map (mapClick)="close_window($event)" [fullscreenControl]='true' [mapTypeControl]='true' [latitude]="lat" [longitude]="lng" [zoom]="13" [scrollwheel]="false">
     <div *ngFor="let data of zonas">
        <agm-marker (markerClick)=select_marker(infoWindow) [latitude]="data.latitud" [longitude]="data.longitud">
           <agm-info-window #infoWindow >            
           </agm-info-window>
         </agm-marker>
      </div>
  </agm-map>

Dan ini component.ts saya:

constructor(public apiService: ApiService) {}
infoWindowOpened = null
previous_info_window = null
...
close_window(){
if (this.previous_info_window != null ) {
  this.previous_info_window.close()
  }    
}

select_marker(data,infoWindow){
 if (this.previous_info_window == null)
  this.previous_info_window = infoWindow;
 else{
  this.infoWindowOpened = infoWindow
  this.previous_info_window.close()
 }
 this.previous_info_window = infoWindow
}

Jadi setiap kali jendela baru akan dibuka, ia mendeteksi acara dan menutup yang sebelumnya, ini juga berfungsi untuk menutup jendela yang terbuka jika pengguna mengklik di luar jendela di bagian lain dari peta.

Terima kasih @JimmyTheNerd , Ini berhasil untuk saya!

Solusi saya, berdasarkan jawaban @lauwrentius :

* .html

<agm-marker 
    *ngFor="let marker of markers; let i = index"
    (markerClick)="showInfoWindow(infoWindow, i)"
>
    <agm-info-window #infoWindow></agm-info-window>
</agm-marker>

* .ts

infoWindowOpened = null;

filter() {
    infoWindowOpened = null;
    // redraw the map with filtered markers
}

showInfoWindow(infoWindow, index) {
    if (this.infoWindowOpened === infoWindow) {
        return;
    }

    if (this.infoWindowOpened !== null) {
        this.infoWindowOpened.close();
    }

    this.infoWindowOpened = infoWindow;   
}

Terima kasih @JimmyTheNerd , Bekerja.

Masalah ini secara otomatis ditandai sebagai usang karena tidak ada aktivitas terbaru. Ini akan ditutup jika tidak ada aktivitas lebih lanjut. Terima kasih atas kontribusi Anda.