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的实例化，以便稍后可以将它们作为参考传递。（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);
    })
  }

每当在路线上进行更改时，我都会向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，每当我希望它重新计算路径时，我就从我注入服务的组件（在我的情况下是Map组件）中调用它。

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

希望它有所帮助！

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

1 个答案: