角度谷歌地图在鼠标悬停时显示信息窗口答案

【问题标题】：angular google maps show info window on mouse over角度谷歌地图在鼠标悬停时显示信息窗口
【发布时间】：2020-09-16 16:04:35
【问题描述】：

我正在使用angular google maps，并尝试在鼠标悬停在标记上时显示标记信息窗口。

查看

<agm-marker *ngFor="let p of people" 
[iconUrl]="'/assets/user.png'" 
[latitude]="p.lat" [longitude]="p.lng"
(markerClick)="onMarkerClick(p)"  
(mouseOver)="showInfo(p)"  (mouseOut)="hideInfo(p)">
  <agm-info-window *ngIf="show">
    <div>Hello! {{p.nome}}</div>
  </agm-info-window>
</agm-marker>

组件

showInfo(p: Person){
    this.show = true;
    console.log(this.show);

  }

  hideInfo(p: Person){
    this.show = false;
    console.log(this.show);    
  }

我知道该事件已正确触发，因为日志是正确的，但信息窗口从未显示。我究竟做错了什么？谢谢。

【问题讨论】：

默认情况下，需要点击agm-info-windows 才能打开它们，IIRC。如果可能，您需要找到一种以编程方式打开它的方法。您所做的只是使它们存在于给定的标记中，但在单击之前它们不会显示。
那是正确的，谢谢。事实上，如果我用简单的div 标签替换agm-info-window 标签，它就可以工作。另外，我必须将 div 移到 map 标签之外，否则它不会显示。这种行为不会让我高兴，但我会考虑解决方案。任何其他提示将不胜感激。

标签： angular angular-google-maps

【解决方案1】：

agm-info-window 提供了一个选项[isOpen] 来显示和隐藏信息窗口。将 show 属性与 [isOpen] 绑定以获得所需的结果。

<agm-info-window [isOpen]="show">
   <div>Hello! {{p.nome}}</div>
</agm-info-window>

【讨论】：

【解决方案2】：

<agm-info-window [isOpen]="show">
   <div>Hello! {{p.nome}}</div>
</agm-info-window>

在 agm-info-window [isOpen]="show" 中，show 是一个布尔值，您可以在 mouseOver 函数中将其与 true 或 false 一起使用。

【讨论】：