Question

我正在使用Angular 6 + AGM核心来显示google map的地理位置。单击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-window在鼠标事件（悬停或单击）期间显示，我还需要向amg-info-window中添加与amg-circle相同的纬度和经度值。当使用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>

角agm核心地图圆单击不打开agm信息窗口

2 个答案: