Question

最近，当我们的应用程序在源位置和目标位置之间使用带有“路标点”的DirectionsService时，我们已经返回了这些“zig-zag”路径，这些路线在视觉上毫无意义。

看起来是什么，一切都很顺利，但是在第7个航点之后的某个地方，路线朝着较早的航路点发出戏剧性的曲折，然后似乎试图纠正自己回到正确的路径。

我附上了一张图片，以显示我想说的内容，并指出了红色出错的地方。另外，我在下面列出了示例代码，并在此处发布了问题的工作演示：

http://dev.anytraq.com:8080/test.html（工作版）

The problem, marked with an arrow

我想知道这里是否有人遇到过这样的问题，或者可以对可能发生的事情有所了解？正如您在下面看到的，代码非常简单....基本上我们只定义一个原始和目标LatLng对象，以及两个之间的8个航点，然后将它发送到DirectionsService。

我很感激可能会想到的任何和所有建议，我完全被难过了。

<!DOCTYPE html> 
<html> 
  <head> 
    <title>ZigZagged Directions Example</title> 

    <meta charset="UTF-8"> 
    <style type="text/css"> 
      html, body, #map_canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    </style> 
    <script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 
      var map;
      function initialize() {

        // map options
        var myOptions = {
          zoom: 8,
          center: new google.maps.LatLng(-34.397, 150.644),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        // the map
        map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

        // directions service
        directionsService = new google.maps.DirectionsService();

        // Define our origin position, the start of our trip.
        originPosition = new google.maps.LatLng('37.66258', '-121.87058');

        // Define 8 waypoints to place between the origin and the destination
        waypoint1 = new google.maps.LatLng('37.65638', '-121.87750');
        waypoint2 = new google.maps.LatLng('37.64333', '-121.88174');
        waypoint3 = new google.maps.LatLng('37.63676', '-121.88447');
        waypoint4 = new google.maps.LatLng('37.60746', '-121.87343');
        waypoint5 = new google.maps.LatLng('37.57868', '-121.87702');
        waypoint6 = new google.maps.LatLng('37.56368', '-121.90382');
        waypoint7 = new google.maps.LatLng('37.54175', '-121.92334');
        waypoint8 = new google.maps.LatLng('37.51806', '-121.94201');

        // push the waypoints defined above into an array
        wayPointArray = new Array();
    wayPointArray.push({location: waypoint1, stopover: false});
    wayPointArray.push({location: waypoint2, stopover: false});
    wayPointArray.push({location: waypoint3, stopover: false});
    wayPointArray.push({location: waypoint4, stopover: false});
    wayPointArray.push({location: waypoint5, stopover: false});
    wayPointArray.push({location: waypoint6, stopover: false});
    wayPointArray.push({location: waypoint7, stopover: false});
    wayPointArray.push({location: waypoint8 , stopover: false});

    // define our definition position, the last stop of our trip
        destinationPosition = new google.maps.LatLng('37.50162', '-121.93034');

         var request = {
      origin: originPosition,
      destination: destinationPosition,
      waypoints: wayPointArray,
      travelMode: google.maps.DirectionsTravelMode.DRIVING,
      unitSystem: google.maps.DirectionsUnitSystem.METRIC,
      optimizeWaypoints: false
    };

        directionsService.route(request, function(response, status) {

          if (status == google.maps.DirectionsStatus.OK) {



            var polyOpts = {
                strokeOpacity: 1.0,
                strokeColor: '#0000FF',
                strokeWeight: 2
            }

            var directionsDisplayOptions = { 
                suppressMarkers: false, 
                suppressInfoWindows: false, 
                preserveViewport: false,
                polylineOptions: polyOpts
            };

            directionsRenderer = new google.maps.DirectionsRenderer(directionsDisplayOptions);
            directionsRenderer.setMap(map);
            directionsRenderer.setDirections(response);


          } else {

            console.info('could not get route');
            console.info(response);

          }
    });




      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script> 
  </head> 
  <body> 
    <div id="map_canvas"></div> 
  </body> 
</html>

Answer 1

这是渲染中的一个错误。

在＆＃34;合并到I-680＆＃34;之后在地图上绘制的线条;由此编码字符串给出，该字符串出现在Directions Service的JSON响应中：

ylvdFjw|fVMJw@x@[Ha@FUGYOKSEYCYB[F[HOTUXMf@QRGxDoAlBIrBDpBDt@@@?p@?nAArCQlDW`BWjCy@`CwArKyHxGcDpA_@vA[rAWtAOxAKpAEdABhBGpEAvAAfCKnGQzDm@lGkCfGiC~CoAhb@mPrDuA~`@oLn@Q~EgBr@Up@MpAKnBGb@?nBLnAX`AVx@Xt@Z?@z@\\HDfBz@rChAtCj@jDHpCU~Cw@~As@jAw@x@m@bDcCbDeCh@a@fAg@FEf@SBA`Bs@jAM`@Cn@CfB?hBPbB\\`CdA`@NJD^NlAb@bM`GlW~JfHzC|D`CpD~DlAxAl@t@bFvGbApAl@hAVj@Pf@d@rAn@hCjFnUh@|ANd@rCfFxEtIvA|BrNd[zZpr@xAhCfEdFlHxJRVhA`B`@~@t@hBh@`BjAlF`BbIpA~EnA~CpA|B~@lA|A~ArDvCzDzCfClBDB`DtBx@h@fHnDzB|@~B`AjH`DzEnBdAb@jB`@dCRrDJtADnBLpCr@dAd@l@Vz@d@vA`A`@\\d@b@vDlErHzIj@p@LPRRf@n@lB`CjBfCzApCVb@jCdGtClHjCjGjCpGjAxCBFtJbUFNDLx@zBnArC~CtHnCpF`@t@P\\LTP^|@~A\\j@hChElB|CrAxBb@h@t@x@h@j@lA|@~@d@vBt@rCh@lBHxAAdEc@nAa@jAo@~@k@pA}@vFuFvDqDdF}DrFcDlB_AhJeEbEyBVMlAo@rJsEhAm@~EiCtD{AlHeD~GkDxBwAVOZSz@i@TShCwBpJiKfHqI

北卡罗来纳大学的Mark McClure教授在http://facstaff.unca.edu/mcmcclur/GoogleMaps/EncodePolyline/decode.html有一个解码器，它可以产生线代表的点列表。他还有一个实用程序，它将获取一个点列表，生成一个编码的字符串并在地图上显示。解码该字符串然后绘制结果地图会产生以下结果：

View of Google Map

这并不表示偏差。因此，方向服务提供要绘制的线（由其数据定义）是正确的，但渲染不是。可能与McClure的页面使用API的第2版而不是第3版有关，因此可以正确地呈现数据。

应在此处报告错误：http://code.google.com/p/gmaps-api-issues/issues。我建议你参考这个问题，并在报告中提供尽可能详细的信息。

使用航点时，通过DirectionsRenderer“zig-zags”渲染的路线返回上一个航点

1 个答案: