我有一个地址列表。我将这些地址发送给Google,他们给了我一条与道路相关的路线,因此我可以从一个地址到下一个地址画一条折线。问题是能够在Google提供的directionsService之外检索该数据。当我将数据设置为全局变量时,我尝试在directionsService函数之外调用它,然后返回为空。我无法从该函数之外获取数据。我相信这就是为什么我无法查看折线的原因。
如果我有默认的经纬度数组,则可以查看折线。只是在我尝试使用该服务时没有。我想打电话给的是this.routepath。
polylines.ts
displayRoute(routeLocations){
this.waypoints = []
google.maps.LatLng(parseFloat(item.latitude),parseFloat(item.longitude)));
for (var i = 0; i < this.routeLocations.stops.length; i++) {
this.waypoints.push({
location : this.routeLocations.stops[i].address1 + " " + this.routeLocations.stops[i].city + ", " + this.routeLocations.stops[i].state,
stopover : true
});
}
this.firststopRec = routeLocations.stops.filter(item => {
return item.locationId;
})[0];
this.laststopRec = routeLocations.stops[routeLocations.stops.length - 1];
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
//Call polylines function
this.polylines = this.calculateAndDisplayRoute(directionsService, directionsDisplay, this.waypoints,this.firststopRec,this.laststopRec, routeLocations);
}
private calculateAndDisplayRoute(directionsService, directionsDisplay, waypoints, firststopRec,laststopRec, routeLocations){
var frtLatlng = new google.maps.LatLng(parseFloat(firststopRec.latitude),parseFloat(firststopRec.longitude));
var lstLatlng = new google.maps.LatLng(parseFloat(laststopRec.latitude),parseFloat(laststopRec.longitude));
console.log(this.routeLocations.stops, 'logging way points')
var request = {
origin: frtLatlng,
destination: lstLatlng,
waypoints: waypoints,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status)
{
console.log(status, request, response, 'logigng direction service col')
if (status == google.maps.DirectionsStatus.OK)
{
directionsDisplay.setDirections(response);
//var route = response.routes[0];
this.routepath = response.routes[0].overview_path.map(function (location) {
return {latitude: location.lat(), longitude: location.lng()};
});
}
})
}