Angular、Google map 、如何从 map 获取标记列表并在其上使用 onClick 事件？

Question

我正在使用 Angular 2+ 的 Angular 模块 AGM 来使用 Google-Map-Api。

https://angular-maps.com/

我有指令在 map 航点上绘制作为 Google map 方向服务的标记。

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

但我不知道如何获取 map 对象中的标记列表。没有像“getMarkers()”这样的方法。

我没有手动向 map 添加标记，而是 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>

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

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

Answer 1

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

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

在我的指令中我添加了:

directionsDisplay.setOptions( { suppressMarkers: true } );

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

类似的事情:

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);
    })
  }