带有航点的Google地图路线生成 [英] Google Maps Route Generation with Waypoints

问题描述

我有一个现有的应用程序，可以跟踪车辆并在地图上呈现他们的折线，并且我希望能够使用路线服务将这些折线导入另一个应用程序（这样导入的折线就可以对准道路并且可以被拖拽等）。

我现在正在做的是编码：

  var encoded_pa​​th = google.maps.geometry.encoding.encodePath（coordinate_array）
  

Lat lng坐标数组，绘制线（在多段线应用程序内），并将其传递到方向服务路线中（如在另一个应用程序中）：

  var coordinates = google.maps.geometry.encoding.decodePath（encoded_pa​​th）; 
 
 var request = {
 origin：coordinates [0]，
 destination：coordinates [coordinates.length  -  1]，
 travelMode：google.maps.DirectionsTravelMode。驾驶
}; 
 
 MapService.directionsService.route（request，function（response，status）{
 if（status == google.maps.DirectionsStatus.OK）{
 MapService.directionsDisplay.setDirections （回应）; 
} 
}）; 
  

这种方法的问题在于它只使用折线的起点和终点来绘制路线，所以沿途的所有转移都没有显示出来。所以我试着添加航点（谷歌有8个限制）来尝试获得更精确的航线，例如：

  var waypoints = []; 
 
 if（coordinates.length< = 8）{
 waypoints = coordinates; 
} 
 else {
 for（var i = 0; i <8; i ++）{
 var index = Math.floor（（coordinates.length / 8）* i ）; 
 
 //如果没有更多航点被添加，则折断
 if（index> coordinates.length  -  1）
 break; 
 
 waypoints.push（new google.maps.LatLng（coordinates [index] .lat（），coordinates [index] .lng（）））; 
 
 //如果我们刚刚添加了最后一个航点
，则中断if（index == coordinates.length  -  1）
 break; 
 
 
 
 
 $ b $ p 
 $ b 
这样它可以在坐标数组中均匀地获得航点。然后我试图在我的电话中显示它们以便路由：
  var request = {
 origin ：coordinate [0]，
 destination：coordinates [coordinates.length  -  1]，
 waypoints：waypoints 
 travelMode：google.maps.DirectionsTravelMode.DRIVING 
}; 
  
但是我得到这个错误：错误：属性航点：在索引0：未知属性lb  
 
 
有人知道会发生什么，或者如何做这个航点的东西？我可以确认数组是通过控制台正确生成的，下面是第一个数组元素的示例： 
 
 
  Array [8] 
 0：N 
 lb：-22.39019 
 mb：143.04560000000004 
 __prot__：N 
 1：... etc等
  
 
 
 
谢谢。 
 
解决方案
 waypoints.push（new google.maps.LatLng（coordinates [index] .lat（），coordinates [index] .lng（）））; 
 
 DirectionsRequest对象定义的'waypoints'属性应该是一个包含google.maps.DirectionsWaypoint对象定义的数组 https://developers.google.com/maps/documentation/javascript/3.exp/reference#DirectionsWaypoint  
 
 
 
所以，试试： 
 
 
  waypoints.push（
 {
 location：新的google.maps.LatLng （coordinates [index] .lat（），coordinates [index] .lng（））
} 
）; 
  
 
I've got an existing app that tracks vehicles and renders their polyline on a map, and I want to be able to import these polylines into another app using the routing service (so that the imported polyline snaps to the road and can be dragged around etc).


What I'm currently doing is encoding:
var encoded_path = google.maps.geometry.encoding.encodePath(coordinate_array)
The lat lng coordinates array that draws the line (inside the polyline app), and passing this into the directions service route like so (inside the other app):
var coordinates = google.maps.geometry.encoding.decodePath(encoded_path);

var request = {
   origin: coordinates[0],
   destination: coordinates[coordinates.length - 1],
   travelMode: google.maps.DirectionsTravelMode.DRIVING
};

MapService.directionsService.route(request, function(response, status) {
   if (status == google.maps.DirectionsStatus.OK) {
      MapService.directionsDisplay.setDirections(response);
   }
});
The problem with this approach is that it's only using the start and end of the polyline to draw the route, so all of the diversions along the route are not shown. So I tried to add waypoints (Google has a limit of 8) to try and get a slightly more accurate route like so:
var waypoints = [];

if (coordinates.length <= 8) {
   waypoints = coordinates;
}
else {
   for (var i = 0; i < 8; i++) {
      var index = Math.floor((coordinates.length/8) * i);

      // Break if there's no more waypoints to be added
      if (index > coordinates.length - 1)
         break;

      waypoints.push(new google.maps.LatLng(coordinates[index].lat(), coordinates[index].lng()));

      // Break if we've just added the last waypoint
      if (index == coordinates.length - 1)
         break;
   }
}
This way it gets waypoints evenly across the coordinates array. And then I'm trying to display them like so on my call to route:
var request = {
   origin: coordinates[0],
   destination: coordinates[coordinates.length - 1],
   waypoints: waypoints
   travelMode: google.maps.DirectionsTravelMode.DRIVING
};
But I'm getting this error: Error: in property waypoints: at index 0: unknown property lb

Does anyone know what could be happening, or how to do this waypoint stuff? I can confirm that the array is correctly generated through the console, here's an example of the first array element:
Array[8]
  0: N
    lb: -22.39019
    mb: 143.04560000000004
    __prot__: N
  1:...etc etc
Thank you.
解决方案

  
waypoints.push(new google.maps.LatLng(coordinates[index].lat(), coordinates[index].lng()));
the 'waypoints' property of the DirectionsRequest object definition should be an Array of google.maps.DirectionsWaypoint object definitions https://developers.google.com/maps/documentation/javascript/3.exp/reference#DirectionsWaypoint

So, try:
waypoints.push(
    {
        location: new google.maps.LatLng(coordinates[index].lat(), coordinates[index].lng())
    }
);


                        
这篇关于带有航点的Google地图路线生成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！