Ouverture d'une fenêtre d'informations sur un polygone AGM

Question

J'utilise la bibliothèque Angular Google Maps et j'essaie de faire apparaître un composant agm-snazzy-info-window lorsqu'un objet polygone sur la carte est cliqué. J'ai essayé de la modélisation sur la « utilisant la directive avec un marqueur » section de 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> 

mais ne rien faire. J'ai essayé de le faire par programme à la place:

<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 
    } 
} 

mais cela n'a pas fonctionné non plus. Dans les deux cas, la carte et les polygones s'affichent très bien, et le console.log dans le second affiche les informations attendues sur un clic, il n'affiche jamais la fenêtre. Est-ce que je fais quelque chose de mal? Y a-t-il un autre moyen de le faire? Note pour d'éventuels problèmes XY: Le composant par défaut (non-snazzy) agm-info-window a bien fonctionné ici et a fait presque tout ce dont j'ai besoin. Cependant, je dois être en mesure d'ajouter un style CSS dessus, et je n'ai pas compris comment faire cela. Donc une autre solution pour cela résoudrait au moins mon problème immédiat.

Answer 1

fenêtre Info pourrait être ouvert/fermé si les entrées suivantes sont définies:

• latitude et longitude
• isOpen

Dans votre exemple isOpen changement ne se détecté et donc l'ouverture/la fermeture de la fenêtre d'information n'est pas déclenchée.

Par exemple:

<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> 

et

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

Answer 2

comme une info fenêtres a besoin de latitude et à long, il n'y a pas possible d'afficher une fenêtre d'information uniquement.

J'ai fait un marqueur avec une fenêtre d'information à l'intérieur. Je modifie dynamiquement le html avec le module amg.

Si cela peut aider, il est mon 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> 

Et le composant:

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