Angular, Google 地图，如何从地图中获取标记列表并在其上使用 onClick 事件？

Question

我正在为 Angular 使用 angular 模块 AGM 2+ 使用 Google-Map-Api.

https://angular-maps.com/

我有指令在地图 waypoints 上绘制作为来自 Google 地图方向服务的标记。

现在我想处理地图上每个标记的 onClick 事件，并根据标记位置添加我的工具提示。

但我不知道如何从地图对象中获取标记列表。没有像 "getMarkers()".

这样的方法

我没有手动将标记添加到地图，google.maps.DirectionsRenderer 从 GoogleMapsDirections 服务响应中添加它们，所以此时我没有现有标记的列表。

我的指令代码：

@Directive({
  selector: 'agm-map-directions'
})
export class DirectionsMapDirective implements OnChanges {
  @Input()
  private waypoints: Waypoint[];
  @Input()
  private origin: string;
  @Input()
  private destination: string;
  @Input()
  private optimizeWaypoints: boolean;
  @Input()
  private travelMode: string;

  constructor (private gmapsApi: GoogleMapsAPIWrapper) {}

  ngOnChanges(changes: SimpleChanges): void {
    this.renderDirections();
  }

  renderDirections() {
    this.gmapsApi.getNativeMap().then(map => {
      let directionsService = new google.maps.DirectionsService;
      let directionsDisplay = new google.maps.DirectionsRenderer;
      directionsDisplay.setMap(map);
      directionsService.route({
        origin:  this.origin,
        destination: this.destination,
        waypoints: this.waypoints,
        optimizeWaypoints: this.optimizeWaypoints,
        travelMode: this.travelMode
      }, function(response, status) {
        if (status === 'OK') {
          directionsDisplay.setDirections(response);
          //There I want to handle markers onClick event
        } else {
          window.alert('Directions request failed due to ' + status);
        }
      });
    });
  }
}

我的模板：

<div id="map">
  <agm-map *ngIf="mapLoaded"
           style="height: 500px"
           [zoomControl]="false"
           [disableDefaultUI]="false"
           [disableDoubleClickZoom]="true"
           [streetViewControl]="false">
    <agm-map-directions
      [waypoints]="waypoints"
      [origin]="supplierInfo.origin"
      [destination]="supplierInfo.destination"
      [optimizeWaypoints]="true"
      [travelMode]="'DRIVING'"></agm-map-directions>
  </agm-map>
</div>

是否存在从地图对象中简单检索标记列表的方法？

或者实现相同目标的其他解决方案？

Answer 1

 <agm-map [latitude]="latitude1" [longitude]="longitude1" [zoom]="zoom" [usePanning]='true'>
    <agm-marker *ngFor="let obj of getGoogleData; let i = index" (markerClick)="clickedMarker(obj)" [latitude]="obj.latitude" [longitude]="obj.longtitude"
        [label]="a">
        <agm-info-window>
            <strong>{{obj.title}}</strong>
        </agm-info-window>
    </agm-marker>

以上代码段可帮助您在地图上获得多个标记。如您所见，我们有标记组件来显示多条记录并将对象传递给 marketclick 函数以呈现 title/data 以显示最终用户

Answer 2

不幸的是，上述解决方案在我的情况下不起作用，也许是因为我的指令，我不知道。

但我找到了其他解决方案。

我在指令中添加了：

directionsDisplay.setOptions( { suppressMarkers: true } );

现在标记不会自动出现。我从响应路线手动添加它们，我在 LatLng 的地图上有所有标记位置。

类似的东西：

renderDirections() {
    this.gmapsApi.getNativeMap()
      .then(map => {
        let directionsService = new google.maps.DirectionsService;
        let directionsDisplay = new google.maps.DirectionsRenderer;
        directionsDisplay.setMap(map);
        directionsService.route({
          origin:  this.origin,
          destination: this.destination,
          waypoints: this.waypoints,
          optimizeWaypoints: this.optimizeWaypoints,
          travelMode: this.travelMode
        }, (response, status) => {
          if (status === 'OK') {
            directionsDisplay.setDirections(response);
            directionsDisplay.setOptions( { suppressMarkers: true } );
            let route = response.routes[0];
            this.mapService.addMarkersToMap(route, map);
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      });
  }

当我手动添加标记时，我可以设置 OnClick 侦听器并添加带按钮的 infoWindow。

  addMarker(location, map) {
    let marker = new google.maps.Marker({
      position: {
        lat: location.lat(),
        lng: location.lng()
      },
      map: map
    });

    marker.addListener('click',  () => {
      let infoWindow = new google.maps.InfoWindow({
        content: 'some HTML content'
      });
      infoWindow.open(map, marker);
    })
  }

Angular, Google 地图，如何从地图中获取标记列表并在其上使用 onClick 事件？

Angular, Google Maps, How to get list of markers from map and use onClick event on them?

google-maps

google-maps-markers

typescript

angular

angular5