在标记[Google Maps API]附近显示弹出式窗口

时间:2019-02-22 16:08:35

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

如何使该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();
  }
}

但是标记显示在页面右上角的某处。 我怎么解决这个问题?谢谢您的时间!

1 个答案:

答案 0 :(得分: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>

希望有帮助!