使用angular-google-maps和angular2移除路线叠加

Question

我使用一个api来填充带有几个标记的地图，我想要的功能是让用户单击与标记相关联的按钮，它将从他们当前的位置绘制方向。 首先，它可以正常工作，但是当尝试更改坐标时，绘制的当前方向仍然保留

我使用angular2-google-maps绘制标记，但是我必须找到方向的自定义指令。 我认为问题是我需要销毁这些指令的实例，但是使用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的实例化，以便以后可以将其作为引用传递。 （ 请参见javascript通过参考传递 ）

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

每当在路线上进行更改时，我都会向directionsDisplay添加一个侦听器以显示路线。 函数displayRoute以通过@Input传递的起点和终点作为参数，并引用了我保存在Directions对象中的directionsService和directionsDisplay的实例。 我的航路点也通过@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，当我希望它重新计算路线时，我从注入服务的组件（在我的情况下为Map Component）调用该函数。

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

希望能帮助到你！