Angular / google 地图不在路径点之间绘制折线

Question

我是 angular 的新手，问题是我无法使用 agm-polyline 在我的地图上绘制路径。我的数据正在填充我的对象数组，但之后没有执行任何操作。预先感谢您的帮助。

<agm-map [latitude]="lat" [fitBounds]="bounds" [longitude]="lng" [zoom]="defaultZoom">
 <agm-polygon >
    <ng-container>
        <agm-polyline *ngFor="let polyline of polylines;let i = index;"  [strokeColor]="polyline.color" [visible]="true" [zIndex]="1">
           <agm-polyline-point *ngFor="let pint of polylines.path" [latitude]="pint.lat" [longitude]="pint.lng">
           </agm-polyline-point>
       </agm-polyline>
    </ng-container>
    </agm-polygon>
   <sebm-google-map-directions [origin]="origin" [destination]="destination" [travelMode]="travelMode"></sebm-google-map-directions>
  </agm-map>

 this.polylines = this.calculateAndDisplayRoute(directionsService, directionsDisplay,this.waypoints,this.firststopRec,this.laststopRec);


   private calculateAndDisplayRoute(directionsService, directionsDisplay,waypoints,firststopRec,laststopRec){
    var waypnts = [];
    var pts = [];
    this.maxSpeed = 40;
 var getpnts = this.waypoints.map(function(item){
  pts.push({
    latlng: new google.maps.LatLng(parseFloat(item.latitude),parseFloat(item.longitude))
  });
  return pts ;
});
let pnts = pts;
console.log("pnts: "+ JSON.stringify(pnts));
var newPnts = [];
for (let pnts of pts) {
  newPnts.push(pnts.latlng);
}

   var frtLatlng = new google.maps.LatLng(parseFloat(firststopRec.latitude),parseFloat(firststopRec.longitude));
   var lstLatlng = new google.maps.LatLng(parseFloat(laststopRec.latitude),parseFloat(laststopRec.longitude));
    var request = {
      origin: frtLatlng,
      destination: lstLatlng,
      waypoints: waypnts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING
    };
   // console.log("request: {request}: "+ JSON.stringify(request));
    directionsService.route(request, function(response, status) 
    {
      if (status == google.maps.DirectionsStatus.OK) 
      {
        directionsDisplay.setDirections(response);
        //var route = response.routes[0];
        var routewypt = response.routes[0].legs;

        let polylines = [];
        let i = 0;
        let newPolyline = {path: [], color: 'red', strokeWeight: 3};

        for (let point of newPnts) {
          newPolyline.path.push(point);

            newPolyline.path.push( point[i+1] );
            polylines.push(newPolyline);
            newPolyline = {path: [], color: 'red', strokeWeight: 3};
          i++;
        }
        let pint = polylines;
        console.log('pint: ' + JSON.stringify(pint));
        console.log('polylines: ' + JSON.stringify(polylines));
       return polylines;

      }
    }); 
  }

我的数据在那里，但折线路径没有绘制在地图上

[{"path":[{"lat":39.1876259,"lng":-96.58321000000001},null],"color":"red","strokeWeight":3},....]

Answer 1

未检测到更改，因为它发生在异步 google 方向回调中的 angular 框架之外。确保在构造函数中包含变更检测器，并且仅在 赋值后 调用变更检测。使用 lambda 维护 google 方向回调中的范围。

强制更改检测

constructor(private ref: ChangeDetectorRef){}

...

this.calculateAndDisplayRoute(directionsService, directionsDisplay, this.waypoints, this.firststopRec, this.laststopRec);


private calculateAndDisplayRoute(directionsService, directionsDisplay, waypoints, firststopRec, laststopRec) {

    ...

    //USE LAMBDA HERE TO MAINTAIN SCOPE
    directionsService.route(request, (response, status) => {
        if (status == google.maps.DirectionsStatus.OK) {

            ...

            this.polylines = polylines;
            this.ref.detectChanges();
        }
    });
}
...

Angular / google 地图不在路径点之间绘制折线

Angular / google map not drawing polyline between path points

javascript

google-maps

google-polyline

angular-ui-router

angular