Question

我需要在谷歌地图中创建一个涉及多个航点的路线，但谷歌的API不允许超过23个航路点进入航线。作为编码的解决方案，以便使用折线添加标记并在标记之间绘制路线。代码工作得很好，但在一点点停止产生一半的路线，任何人都知道这是否更像谷歌地图的限制？源代码：

<html><head><meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="PolylineEncoder.js"></script>
<script type="text/javascript">

var geocoder;
var directionsService = new google.maps.DirectionsService();
var map;
var trafficLayer;
var bikeLayer;
var poly;
var LocationsMarkers = []; 
var Employees =[];
var latlngCenter;

function GetMarkers(){
  for (var i = 0; i < Employees.length; i++) {
    var Employee = Employees[i];
    var myLatLng = new google.maps.LatLng(Employee[1], Employee[2]);

    // Add the location to vector for routing
    LocationsMarkers.push(new google.maps.LatLng(Employee[1], Employee[2]));

    // Add a marker
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: Employee[0],
        zIndex: Employee[3]
    });
  }

  // If the length of LocationMarkers > 1, i'm get the routes and i create the polyline.
  if (LocationsMarkers.length > 1){

      var polyOptions = {
        strokeColor: '#000000',
        strokeOpacity: 1.0,
        strokeWeight: 3
      }
      poly = new google.maps.Polyline(polyOptions);
      poly.setMap(map);

      for (var a = 0; a < LocationsMarkers.length; a++) {
          calcRoute(LocationsMarkers[a], LocationsMarkers[a+1]);
      }
  }
}

// calculate the route on the markers.
function calcRoute(start, end) {

    var request = {
        origin:start,
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.WALKING
    };
    var path = poly.getPath();        
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
            for (var i = 0; i < response.routes.length; i++) {
               for (var i2 = 0; i2 < response.routes[i].legs.length; i2++) { 
                 for (var i3 = 0; i3 < response.routes[i].legs[i2].steps.length; i3++) {              
                   // add the start and end location by the legs of routes on the path to the polyline
                   path.push(response.routes[i].legs[i2].steps[i3].start_location);
                   path.push(response.routes[i].legs[i2].steps[i3].end_location);
                 }
               }
            }
    }
    });
}

function TrafficOn()     { trafficLayer.setMap(map); }
function TrafficOff()    { trafficLayer.setMap(null); }
function BicyclingOn()   { bikeLayer.setMap(map); }
function BicyclingOff()  { bikeLayer.setMap(null);}
function StreetViewOn()  { map.set("streetViewControl", true); }
function StreetViewOff() { map.set("streetViewControl", false); }

function initialize() {
    geocoder = new google.maps.Geocoder();

    CollectData();

    var myOptions = {
       zoom: 18,
       center: latlngCenter,
       mapTypeId: google.maps.MapTypeId.ROADMAP
    }; 

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    trafficLayer = new google.maps.TrafficLayer();
    bikeLayer = new google.maps.BicyclingLayer();
    GetMarkers();
}

function CollectData(){
 // In this example I used only 20 markers, but there will be situations where I have  to show more than 50.          
 Employees = [["1",-20.14669,-44.888862 , 1],
            ["2",-20.1454,-44.892467 , 2],
            ["3",-20.14403,-44.890579 , 3],
            ["4",-20.142741,-44.886716 , 4],
            ["5",-20.143668,-44.885922 ,5],
            ["6",-20.14256,-44.885579  ,6],
            ["7",-20.141512,-44.885879 ,7],
            ["8",-20.140465,-44.885997 ,8],
            ["9",-20.138722,-44.88545  ,9],
            ["10",-20.137886,-44.887071,10],
            ["11",-20.137201,-44.891106,11],
            ["12",-20.137483,-44.892157,12],
            ["13",-20.138047,-44.893251,13],
            ["14",-20.138631,-44.894303,14],
            ["15",-20.139296,-44.895311,15],
            ["16",-20.138208,-44.895204,16],
            ["17",-20.136476,-44.895569,17],
            ["18",-20.137765,-44.897049,18],
            ["19",-20.138067,-44.899238,19],
            ["20",-20.138994,-44.900461,20] ];

  latlngCenter = new google.maps.LatLng(Employees[0][1],Employees[0][2]);
}
</script></head>
   <body onload="initialize()">
        <div id="map_canvas" style="width:100%; height:100%">
        </div>
   </body>
</html>

Image of map

Answer 1

您应该检查DirectionsService的返回状态。它返回OVER_QUERY_LIMIT。

请注意maximum number of waypoints in the Google Maps API v3为8（加上来源和目的地），除非您付费（Maps API for Business）。

如果你检查状态并在延迟后重试，如果错误是OVER_QUERY_LIMIT，它最终会完成：

http://www.geocodezip.com/geoxml3_test/v3_directions_multipleWayPts.html

根据Google地图上的路线制作折线

1 个答案: