Показать всплывающее окно рядом с маркером [google maps api] - PullRequest
Новая
       25

Показать всплывающее окно рядом с маркером [google maps api]

0 голосов
/ 22 февраля 2019

Как я могу сделать этот 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 голосов
/ 25 февраля 2019

Вы можете попытаться не делать это «вручную».Вместо этого используйте 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>

Надеюсь, это поможет!

...