在标记附近显示弹出窗口 [google maps api]答案

【问题标题】：Show pop-up near marker [google maps api]在标记附近显示弹出窗口 [google maps api]
【发布时间】：2019-07-16 18:41:38
【问题描述】：

如何让这个popup 显示在marker 附近？

这就是我所拥有的

.html

<agm-map [latitude]="lat" [longitude]="long" style="height: 350px;" [fitBounds]="true">
  <agm-marker *ngFor="let data of locations; let i = index" [latitude]="data.lat" [longitude]="data.lng" [agmFitBounds]="true"
    (mouseOver)="clickOnMarker($event)" (mouseOut)="outsideMarker($event)" data-toggle="modal" data-target="#myModal">
  </agm-marker>
</agm-map>
<button id="openModalButton" [hidden]="false" data-toggle="dropdown" data-target="#myModal">Open Modal</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  <li class="details">Item</li>
</ul>

.ts

  clickOnMarker(event) {
    document.getElementById("openModalButton").click();
  }

  outsideMarker(event) {
    document.getElementById("openModalButton").click();
  }
}

但标记显示在页面右上角的某处。我怎么解决这个问题？感谢您的宝贵时间！

【问题讨论】：

你可能需要标记的像素位置来放置模态..你可以看看stackoverflow.com/questions/2674392/…

标签： html angular google-maps google-maps-api-3 angular6

【解决方案1】：

您可以尝试不要“手动”执行此操作。请改用agm-info-window：

<agm-map [latitude]="lat" [longitude]="long" style="height: 350px;" [fitBounds]="true">
  <agm-marker *ngFor="let data of locations; let i = index" [latitude]="data.lat" [longitude]="data.lng" [agmFitBounds]="true">
    <agm-info-window [disableAutoPan]="true">
         Hello world!
    </agm-info-window>
  </agm-marker>
</agm-map>

希望对你有帮助！

【讨论】：