Question

我在AGM地图上使用经度和纬度显示了多个标记。我想在每个标记上显示完整地址。有人可以帮助我在点击或悬停在每个标记上显示完整的地址吗？

我已使用以下示例使用Angular显示地图。

https://stackblitz.com/edit/angular-google-maps-demo?file=app%2Fapp.component.html

Answer 1

Here is my solution for the normal InfoWindow, but it should work with SnazzyWindow as well:

**.html**

<agm-map>
  <agm-marker *ngFor="let marker of markers" 
    (markerClick)="openWindow(marker.id)" 
    [latitude]="marker.lat" 
    [longitude]="marker.lng">
    <agm-info-window 
      [isOpen]="isInfoWindowOpen(marker.id)"
      [latitude]="marker.lat" 
      [longitude]="marker.lng">InfoWindow #{{marker.id}}</agm-info-window>
  </agm-marker>
</agm-map>

<button type="button" (click)="openWindow(5)">Open InfoWindow 5</button>

**.ts**

openedWindow : number = 0; // alternative: array of numbers

openWindow(id) {
    this.openedWindow = id; // alternative: push to array of numbers
}

isInfoWindowOpen(id) {
    return this.openedWindow == id; // alternative: check if id is in array
}


Make sure you added the latitude and longitude attributes to <agm-marker> and <agm-info-window>. Otherwise the <agm-info-window> position would differ from the marker, when you open it by the button.

If you want to have multiple info windows open at the same time, have a look at the comments above, starting with alternative:.

You may need to add more attributes to make it work. The code is limited to explain the basic functionality.

单击或将鼠标悬停在标记上时，AGM地图显示完整地址

1 个答案: