使用angular-google-maps和angular2移除方向叠加

Question

我正在使用api来填充几个标记的地图，我想要的功能是让用户点击与标记相关联的按钮，它将从他们的当前位置绘制方向。在第一种情况下，它工作得很好，但在尝试更改坐标时，当前绘制的方向保持不变

我正在使用angular2-google-map来绘制标记，但我必须为方向找到一个自定义指令。我认为问题在于我需要销毁directions的实例，但是使用ngIf没有帮助。我还尝试使用directionsDisplay.set('directions'，null)在我的指令中重置方向的实例；但也不起作用

      /* directions.directive.ts */

      import {GoogleMapsAPIWrapper} from '@agm/core/services/google-maps-api-wrapper';
      import { Directive,  Input} from '@angular/core';
      declare var google: any;

      @Directive({
        selector: '<agm-map-directions  [origin]="origin" [destination]="destination" #test></agm-map-directions>'
      })
      export class DirectionsMapDirective {
        @Input() origin;
        @Input() destination;
        constructor (private gmapsApi: GoogleMapsAPIWrapper) {}
        ngOnInit(){
          this.gmapsApi.getNativeMap().then(map => {

                    var directionsService = new google.maps.DirectionsService;
                    var directionsDisplay = new google.maps.DirectionsRenderer;

                      console.log("test");
                    directionsDisplay.setMap(map);
                    directionsService.route({
                            origin: {lat: this.origin.latitude, lng: this.origin.longitude},
                            destination: {lat: this.destination.latitude, lng: this.destination.longitude},
                            waypoints: [],
                            optimizeWaypoints: true,
                            travelMode: 'DRIVING'
                          }, function(response, status) {
                                      if (status === 'OK') {


                                        directionsDisplay.setDirections(response);
                                      } else {
                                        window.alert('Directions request failed due to ' + status);
                                      }
                    });

          });
        }
      }

下面是与之关联的html

    <agm-map [zoom]="13" [latitude]="currentLocation.result.latitude" [longitude]="currentLocation.result.longitude">
        <agm-marker [latitude]="currentLocation.result.latitude" [longitude]="currentLocation.result.latitude"></agm-marker>

        <agm-marker *ngFor="let device of location.ChargeDevice; let i = index" 
                    ngShow="device.SubscriptionRequiredFlag" 
                    [latitude]="convertStringToNumber(device.ChargeDeviceLocation.Latitude)" 
                    [longitude]="convertStringToNumber(device.ChargeDeviceLocation.Longitude)"
                    (markerClick)="clickedMarker(device)">
        </agm-marker>


        <div *ngIf="showDirections" >
            <agm-map-directions  [origin]="origin" [destination]="destination" #test></agm-map-directions>
        </div>
    </agm-map>

Answer 1

我和你有同样的问题。

我通过创建一个全局对象来解决这个问题，该对象包含directionsService和directionsDisplay的实例化，以便稍后能够将它们作为引用进行传递。( See javascript pass by reference )

  public directions: any = {
    directionsService: null,
    directionsDisplay: null
  }

然后，我创建了一个初始化映射的函数，并在ngOnInit()函数中调用它：

 constructor(private _gmapsApi: GoogleMapsAPIWrapper) { }

 ngOnInit() {
    this.initalizeMap(this.directions);
  }

  initalizeMap(directions): void {
    this._gmapsApi.getNativeMap().then(map => {
      directions.directionsService = new google.maps.DirectionsService;
      directions.directionsDisplay = new google.maps.DirectionsRenderer;
      directions.directionsDisplay.setMap(map);
      directions.directionsDisplay.addListener('directions_changed', function() {
          this.displayRoute(this.origin, this.destination, directions.directionsService, directions.directionsDisplay);
      });

      this.displayRoute(this.origin, this.destination, directions.directionsService, directions.directionsDisplay);
    })
  }

每当方向发生变化时，我都会在displayRoute的directionsDisplay中添加一个侦听器。函数displayRoute以通过@Input传递的源和目的地作为参数，并引用directionsService和directionsDisplay，我将它们的实例保存在directions对象中。我选择的路点也是通过@Input。

displayRoute(origin, destination, service, display): void {
  var myWaypoints = [];

  for (var i = 0; i < this.waypoints.length; i++) {
    console.log(this.waypoints[i].markerID);
    console.log(this.waypoints[i].location);
  }

  for (var i = 0; i < this.waypoints.length; i++) {
    myWaypoints.push({
      location: new google.maps.LatLng(this.waypoints[i].location),
      stopover: true
    })
  }

  service.route({
    origin: origin,
    destination: destination,
    waypoints: myWaypoints,
    travelMode: 'WALKING',
    avoidTolls: true
  }, function(response, status) {
    if (status === 'OK') {
      console.log("Route OK.");
      display.setDirections(response);
    } else {
      alert('Could not display directions due to: ' + status);
    }
  });
 }

最后一个也是最重要的一个函数是calculateRoute，每当我希望它重新计算路由时，我都会从注入服务的组件(在我的例子中是地图组件)中调用它。

  calculateRoute(): void {
    this._gmapsApi.getNativeMap().then(map => {
      this.displayRoute(this.origin, this.destination, this.directions.directionsService, this.directions.directionsDisplay);
    });
  }

希望它能帮上忙！