Угловая / Google карта не рисует ломаную линию между точками - PullRequest
Новая
       56

Угловая / Google карта не рисует ломаную линию между точками

0 голосов
/ 29 августа 2018

Я очень плохо знаком с angular, проблема в том, что я не могу получить agm-ломаную линию, чтобы нарисовать путь на моей карте. Мои данные заполняют мой массив объектов, но после этого никакие действия не выполняются. Заранее благодарю за помощь. 

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

      }
    }); 
  }

Мои данные есть, но путь полилинии не отображается на карте

[{ "путь": [{ "ш": 39,1876259, "LNG": - 96,58321000000001}, нуль], "цвет": "красный", "strokeWeight": 3}, ....]

1 Ответ

0 голосов
/ 30 августа 2018

Изменение не обнаружено, поскольку оно происходит за пределами угловой структуры в рамках асинхронного обратного вызова Google. Убедитесь, что вы включили детектор изменений в конструктор и только обнаружение изменений вызовов после было присвоено значение. Используйте лямбду, чтобы поддерживать область в обратном вызове 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();
        }
    });
}
...
...