2012-10-24 49 views
0

我需要在涉及多個航點的Google地圖中創建路線,但Google的API不允許超過23個航點進入路線。作爲編碼的解決方案,以便使用多段線添加標記並在標記之間繪製路線。代碼工作完美,但停在一個點上生成的路線,任何人都知道這是更多的谷歌地圖的限制? 源代碼:在Google地圖上根據路線製作多段線

<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

回答

2

您應檢查爲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

+0

好了,我的目的是用這種方式來繞過這個限制,但我看到即使是付費API也限制了我的這一點。感謝您的關注。 –

+0

限制是有原因的(爲了防止濫用免費服務),你不應該「繞過」它。如果您爲DirectionsService的呼叫添加延遲以防止OVER_QUERY_LIMIT錯誤,則可以執行您正在嘗試執行的操作,但只需要較長時間才能加載。 – geocodezip

+0

我明白了,我的意圖是使用付費API,但我的問題是: 使用付費API我可以使用超過23個航點?如果不是,我可能不得不做類似於上面討論的內容。 –