Öffnen eines Infofensters auf einem AGM-Polygon

Question

Ich benutze die Angular Google Maps-Bibliothek und versuche, eine agm-snazzy-info-window-Komponente aufzurufen, wenn ein Polygonobjekt auf der Karte angeklickt wird. Ich habe versucht, die Modellierung auf dem „mit der Richtlinie mit einem Marker“ in this page:

<agm-map [fitBounds]="mapData.bounds"> 
    <agm-polygon *ngFor="let polygon of mapData.polygons" [paths]="polygon.points"> 
     <agm-snazzy-info-window> 
      <ng-template> 
       text goes here 
      </ng-template> 
     </agm-snazzy-info-window>  
    </agm-polygon> 
</agm-map> 

aber das hat nichts tun. Ich habe versucht, es stattdessen programmgesteuert zu tun:

<agm-map [fitBounds]="mapData.bounds"> 
    <agm-polygon *ngFor="let polygon of mapData.polygons; let i = index" [paths]="polygon.points" 
     (polyClick)="polyClicked(i, polygon, infoWindow)"></agm-polygon> 
    <agm-snazzy-info-window #infoWindow [latitude]="mapData.selectedPoint.lat" [longitude]="mapData.selectedPoint.lng"> 
     <ng-template> 
      text goes here 
     </ng-template> 
    </agm-snazzy-info-window>  
</agm-map> 

polyClicked (index: number, polygon, infoWindow: AgmSnazzyInfoWindow) { 
    console.log(index, polygon, infoWindow) // this works correctly 

    // getPolygonCenter returns a LatLngLiteral from the center of a rectangle that fits the points 
    this.mapData.selectedPoint = getPolygonCenter(polygon.points) 

    if (infoWindow.isOpen && index === this.mapData.polygonIndex) { 
     // close the window if it's already open and we're clicking the same polygon again 
     infoWindow.isOpen = false 
    } else { 
     // otherwise open it and save the index of the clicked polygon 
     this.mapData.polygonIndex = index 
     infoWindow.isOpen = true 
    } 
} 

aber das hat auch nicht funktioniert. In beiden Fällen werden die Karte und die Polygone gut angezeigt, und die console.log im zweiten zeigt die erwarteten Informationen auf einen Klick, es zeigt das Fenster nie an. Mache ich etwas falsch? Gibt es einen anderen Weg, es zu tun?

Hinweis für mögliche XY-Probleme: Die Standard (nicht-Snazzy) agm-info-window Komponente funktionierte hier gut und tat fast alles, was ich brauche. Allerdings muss ich in der Lage sein, etwas CSS-Styling hinzuzufügen und konnte nicht herausfinden, wie das geht. Eine andere Lösung würde also zumindest mein unmittelbares Problem lösen.

Answer 1

Info-Fenster geöffnet werden können/geschlossen, wenn die folgenden Eingänge eingestellt sind:

• latitude und longitude
• isOpen

In Ihrem Beispiel isOpen Änderung wird nicht erkannt zu werden und somit/Eröffnung Schließen des Infofensters wird nicht ausgelöst.

Zum Beispiel:

<agm-snazzy-info-window #infoWindow 
         [latitude]="mapData.selectedPoint.lat" 
         [longitude]="mapData.selectedPoint.lng" 
         [isOpen]="mapData.infoWindow.isOpen"> 
    <ng-template> 
     text goes here 
    </ng-template> 
</agm-snazzy-info-window> 

und

polyClicked(index: number, polygon, infoWindow: AgmSnazzyInfoWindow) { 
    this.mapData.infoWindow.isOpen = Object.assign({}, this.mapData.infoWindow.isOpen); 
    this.mapData.selectedPoint = getPolygonCenter(polygon.points); 
} 

Answer 2

wie ein Fenster Info lat und lange braucht, dann ist es nicht nur möglich, ein Info-Fenster angezeigt werden soll.

Ich machte einen Marker mit einem Infofenster hinein. Ich ändere dynamisch das HTML mit AMG-Modul. Wenn

, die helfen können, gibt es mein Code:

html:

<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [mapTypeId]="mapTypeId"> 

    <agm-data-layer [geoJson]="geoJsonObject" (layerClick)="clicked($event)" [style]="styleFunc"> 
     </agm-data-layer> 

    <agm-marker [latitude]="latChamp" [longitude]="longChamp" [visible]="false"> 

     <agm-info-window [disableAutoPan]="true" [isOpen]="visible" > 
     Id Champs : <strong>{{id}}</strong> 
     </agm-info-window> 

    </agm-marker> 

    </agm-map> 

Und die Komponente:

export class GmapsComponent implements OnChanges{ 

    visible : boolean = false; 
    latChamp : number = 46.245399818615894; 
    longChamp : number = -72.0323995083924; 
    id: number = 0; 
    geoJsonObject: Object; 
.... 

clicked(clickEvent) 
    { 
    this.visible = true; 
    this.latChamp = clickEvent.feature.f.lat; 
    this.longChamp = clickEvent.feature.f.long; 
    this.id = clickEvent.feature.f.id; 
    }; 

styleFunc(feature) 
{ 
    return (
    { 
    clickable: true, 
    strokeColor: 'yellow', 
    fillColor: feature.getProperty('color'), 
    strokeWeight: 1.3, 
    fillOpacity: 0.3 
    }); 
}; 

show on map