Question

我正在使用Angular Google地图库并尝试在点击地图上的多边形对象时弹出agm-snazzy-info-window组件。我尝试在＆＃34;上使用带有标记的指令＆＃34;进行建模。 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>

但那并没有做任何事情。我尝试以编程方式执行此操作：

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

但这也没有奏效。在这两种情况下，地图和多边形都显示正常，第二个中的console.log显示点击的预期信息，它从不显示窗口。难道我做错了什么？还有其他办法吗？

注意可能存在的XY问题：默认（非时髦）agm-info-window组件在这里运行良好，几乎可以完成我需要的一切。但是，我需要能够在其上添加一些CSS样式，并且无法弄清楚如何做到这一点。因此，另一个解决方案至少可以解决我的问题。

Answer 1

如果设置了以下输入，则可以打开/关闭信息窗口：

latitude和longitude
isOpen

在您的示例isOpen中未检测到更改，因此未触发打开/关闭信息窗口。

例如：

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

和

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

在AGM多边形上打开信息窗口

1 个答案: