angular agm core map circle点击不打开agm信息窗口

Question

我使用Angular 6 + AGM核心来显示谷歌地图地理位置。点击agm-marker会显示agm-info-window但是当我点击agm-circle时，信息窗口不起作用。

        <agm-circle
            [latitude]="marker.latitude"
            [longitude]="marker.longitude"
            [radius]="marker.value * markerRadiusScaleFactor"
            (circleClick)="onCircleClicked($event)">
            <agm-info-window [isOpen]="visible">
                <app-map-info-window (close)="visible = false" [marker]="marker"></app-map-info-window>
            </agm-info-window>
        </agm-circle>

component.ts

onCircleClicked($event: MouseEvent) {
    console.log($event);
    this.visible = !this.visible;
}

我在这做错了什么？

谢谢

Answer 1

这是完美的，检查你是不是点击了绘制的圆圈以外的东西，比如agm-marker或其他一些div。

Answer 2

为了在鼠标事件（过度或单击）期间显示amg-info窗口，我需要将与amg-circle相同的纬度和经度值添加到amg-info-window。使用amg-marker而不是amg-info-circle时不需要这样做。看起来像angular-google-map实现中的一些不一致。

    <div *ngFor="let site of sites">
      <agm-circle *ngIf="site.active"
        [latitude]="site.latitude"
        [longitude]="site.longitude"
        [radius]="site.radius"
        [fillColor]="site.color"
        [fillOpacity]="site.opacity"
        (mouseOver)="infoWindow.open();"
        (mouseOut)="infoWindow.close();">

        <agm-info-window
          [latitude]="site.latitude"
          [longitude]="site.longitude"
          [disableAutoPan]="false" #infoWindow>

          <div>
              <span>
                <b>{{site.name +': '}} ({{site.budget | currency }}) </b>
              </span>
          </div>

        </agm-info-window>
      </agm-circle>
    </div>