我对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},....] >
答案 0 :(得分:0)
未检测到更改,因为更改发生在异步google方向回调内的角度框架之外。确保在构造函数中包括变更检测器,并且仅在分配之后调用变更检测。使用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();
}
});
}
...