想要在谷歌地图上显示 100 个地址之间的方向

Question

我想在 Google 地图上显示大约 100 个地址的优化路线。我已经搜索过了，但谷歌在免费 API 中每个请求只提供 8 个地址，在付费 API 中只提供 23 个地址。比我看到一个使用无限地址做同样事情并命名为“Route4Me”的网站。

现在的情况是我以优化方式拥有所有地址的纬度和经度。我只想在 Google 地图上使用这些数据显示路线。

这种情况与谷歌地图中从 A 到 B 的路线并不完全一致。我想在谷歌不提供的地图上映射路线中的 50 多个地址。所以我想要不同的解决方案。

你能给我一个解决方案吗？

Answer 1

此代码（来自Google Maps API to get bus route 中的示例之一，将（对我而言）显示 90 个点而不会超出查询限制。

jQuery(function() {

  var map = new window.google.maps.Map(document.getElementById("map"));
  // new up complex objects before passing them around
  var directionsDisplay = new window.google.maps.DirectionsRenderer({
    suppressMarkers: true
  });
  var directionsService = new window.google.maps.DirectionsService();

  Tour_startUp(stops);

  window.tour.loadMap(map, directionsDisplay);
  window.tour.fitBounds(map);

  if (stops.length > 1) window.tour.calcRoute(directionsService, directionsDisplay, map);
});

function Tour_startUp(stops) {
  document.getElementById('info').innerHTML = "stops:" + stops.length + "<BR>";
  if (!window.tour) window.tour = {
    updateStops: function(newStops) {
      stops = newStops;
    },
    // map: google map object
    // directionsDisplay: google directionsDisplay object (comes in empty)
    loadMap: function(map, directionsDisplay) {
      var myOptions = {
        zoom: 13,
        center: new window.google.maps.LatLng(44.833050, -68.749900),
        mapTypeId: window.google.maps.MapTypeId.ROADMAP
      };
      map.setOptions(myOptions);
      directionsDisplay.setMap(map);
    },
    fitBounds: function(map) {
      var bounds = new window.google.maps.LatLngBounds();

      // extend bounds for each record
      jQuery.each(stops, function(key, val) {
        var myLatlng = new window.google.maps.LatLng(val.Geometry.Latitude, val.Geometry.Longitude);
        bounds.extend(myLatlng);
      });
      map.fitBounds(bounds);
    },
    calcRoute: function(directionsService, directionsDisplay, map) {
      var directionsDisplays = [];
      var batches = [];
      var itemsPerBatch = 10; // google API max = 10 - 1 start, 1 stop, and 8 waypoints
      var itemsCounter = 0;
      var wayptsExist = stops.length > 0;

      while (wayptsExist) {
        var subBatch = [];
        var subitemsCounter = 0;

        for (var j = itemsCounter; j < stops.length; j++) {
          subitemsCounter++;
          subBatch.push({
            location: new window.google.maps.LatLng(stops[j].Geometry.Latitude, stops[j].Geometry.Longitude),
            stopover: true
          });
          if (subitemsCounter == itemsPerBatch) break;
        }

        itemsCounter += subitemsCounter;
        batches.push(subBatch);
        wayptsExist = itemsCounter < stops.length;
        // If it runs again there are still points. Minus 1 before continuing to
        // start up with end of previous tour leg
        itemsCounter--;
      }

      // now we should have a 2 dimensional array with a list of a list of waypoints
      var combinedResults;
      var unsortedResults = [{}]; // to hold the counter and the results themselves as they come back, to later sort
      var directionsResultsReturned = 0;

      for (var k = 0; k < batches.length; k++) {
        var lastIndex = batches[k].length - 1;
        var start = batches[k][0].location;
        var end = batches[k][lastIndex].location;

        // trim first and last entry from array
        var waypts = [];
        waypts = batches[k];
        waypts.splice(0, 1);
        waypts.splice(waypts.length - 1, 1);

        var request = {
          origin: start,
          destination: end,
          waypoints: waypts,
          travelMode: window.google.maps.TravelMode.DRIVING
        };
        (function(kk) {
          directionsService.route(request, function(result, status) {
            if (status == window.google.maps.DirectionsStatus.OK) {
              var unsortedResult = {
                order: kk,
                result: result
              };
              unsortedResults.push(unsortedResult);

              directionsResultsReturned++;

              if (directionsResultsReturned == batches.length) // we've received all the results. put to map
              {
                // sort the returned values into their correct order
                unsortedResults.sort(function(a, b) {
                  return parseFloat(a.order) - parseFloat(b.order);
                });
                var count = 0;
                for (var key in unsortedResults) {
                  if (unsortedResults[key].result != null) {
                    if (unsortedResults.hasOwnProperty(key)) {
                      if (count == 0) // first results. new up the combinedResults object
                        combinedResults = unsortedResults[key].result;
                      else {
                        // only building up legs, overview_path, and bounds in my consolidated object. This is not a complete
                        // directionResults object, but enough to draw a path on the map, which is all I need
                        combinedResults.routes[0].legs = combinedResults.routes[0].legs.concat(unsortedResults[key].result.routes[0].legs);
                        combinedResults.routes[0].overview_path = combinedResults.routes[0].overview_path.concat(unsortedResults[key].result.routes[0].overview_path);

                        combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(unsortedResults[key].result.routes[0].bounds.getNorthEast());
                        combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(unsortedResults[key].result.routes[0].bounds.getSouthWest());
                      }
                      count++;
                    }
                  }
                }
                directionsDisplay.setDirections(combinedResults);
                var legs = combinedResults.routes[0].legs;
                for (var i = 0; i < legs.length; i++) {
                  var markerletter = "A".charCodeAt(0);
                  markerletter += i;
                  markerletter = String.fromCharCode(markerletter);
                  createMarker(directionsDisplay.getMap(), legs[i].start_location, "marker" + i, "some text for marker " + i + "<br>" + legs[i].start_address, markerletter);
                }
                var i = legs.length;
                var markerletter = "A".charCodeAt(0);
                markerletter += i;
                markerletter = String.fromCharCode(markerletter);
                createMarker(directionsDisplay.getMap(), legs[legs.length - 1].end_location, "marker" + i, "some text for the " + i + "marker<br>" + legs[legs.length - 1].end_address, markerletter);
              }
            } else {
              document.getElementById('info').innerHTML += "failed[" + kk + "]:" + status + "<br>";
            }
          });
        })(k);
      }
    }
  };

}
var infowindow = new google.maps.InfoWindow({
  size: new google.maps.Size(150, 50)
});


function createMarker(map, latlng, label, html, color) {
  // alert("createMarker("+latlng+","+label+","+html+","+color+")");
  var contentString = '<b>' + label + '</b><br>' + html;
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: label,
    zIndex: Math.round(latlng.lat() * -100000) << 5
  });
  marker.myname = label;

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map, marker);
  });
  return marker;
}

var stops = [{
    "Geometry": {
      "Latitude": 44.833050,
      "Longitude": -68.749900
    }
  }, {
    "Geometry": {
      "Latitude": 44.832950,
      "Longitude": -68.749930
    }
  }, {
    "Geometry": {
      "Latitude": 44.832960,
      "Longitude": -68.749140
    }
  }, {
    "Geometry": {
      "Latitude": 44.832860,
      "Longitude": -68.749130
    }
  }, {
    "Geometry": {
      "Latitude": 44.832800,
      "Longitude": -68.749730
    }
  }, {
    "Geometry": {
      "Latitude": 44.832730,
      "Longitude": -68.750410
    }
  }, {
    "Geometry": {
      "Latitude": 44.833130,
      "Longitude": -68.751080
    }
  }, {
    "Geometry": {
      "Latitude": 44.829890,
      "Longitude": -68.753860
    }
  }, {
    "Geometry": {
      "Latitude": 44.828530,
      "Longitude": -68.755060
    }
  }, {
    "Geometry": {
      "Latitude": 44.828260,
      "Longitude": -68.754960
    }
  }, {
    "Geometry": {
      "Latitude": 44.828160,
      "Longitude": -68.754830
    }
  }, {
    "Geometry": {
      "Latitude": 44.827990,
      "Longitude": -68.754750
    }
  }, {
    "Geometry": {
      "Latitude": 44.826670,
      "Longitude": -68.754470
    }
  }, {
    "Geometry": {
      "Latitude": 44.826310,
      "Longitude": -68.754480
    }
  }, {
    "Geometry": {
      "Latitude": 44.826070,
      "Longitude": -68.754570
    }
  }, {
    "Geometry": {
      "Latitude": 44.825570,
      "Longitude": -68.755010
    }
  }, {
    "Geometry": {
      "Latitude": 44.825380,
      "Longitude": -68.755350
    }
  }, {
    "Geometry": {
      "Latitude": 44.825280,
      "Longitude": -68.755570
    }
  }, {
    "Geometry": {
      "Latitude": 44.825250,
      "Longitude": -68.755610
    }
  }, {
    "Geometry": {
      "Latitude": 44.824140,
      "Longitude": -68.758790
    }
  }, {
    "Geometry": {
      "Latitude": 44.823260,
      "Longitude": -68.761360
    }
  }, {
    "Geometry": {
      "Latitude": 44.821690,
      "Longitude": -68.765580
    }
  }, {
    "Geometry": {
      "Latitude": 44.820390,
      "Longitude": -68.769330
    }
  }, {
    "Geometry": {
      "Latitude": 44.819820,
      "Longitude": -68.771040
    }
  }, {
    "Geometry": {
      "Latitude": 44.819550,
      "Longitude": -68.772200
    }
  }, {
    "Geometry": {
      "Latitude": 44.819520,
      "Longitude": -68.772390
    }
  }, {
    "Geometry": {
      "Latitude": 44.819480,
      "Longitude": -68.772730
    }
  }, {
    "Geometry": {
      "Latitude": 44.819450,
      "Longitude": -68.773040
    }
  }, {
    "Geometry": {
      "Latitude": 44.819380,
      "Longitude": -68.775300
    }
  }, {
    "Geometry": {
      "Latitude": 44.819250,
      "Longitude": -68.778010
    }
  }, {
    "Geometry": {
      "Latitude": 44.819070,
      "Longitude": -68.779150
    }
  }, {
    "Geometry": {
      "Latitude": 44.818900,
      "Longitude": -68.779830
    }
  }, {
    "Geometry": {
      "Latitude": 44.818710,
      "Longitude": -68.780390
    }
  }, {
    "Geometry": {
      "Latitude": 44.816720,
      "Longitude": -68.785180
    }
  }, {
    "Geometry": {
      "Latitude": 44.815730,
      "Longitude": -68.787300
    }
  }, {
    "Geometry": {
      "Latitude": 44.815340,
      "Longitude": -68.787870
    }
  }, {
    "Geometry": {
      "Latitude": 44.814670,
      "Longitude": -68.788620
    }
  }, {
    "Geometry": {
      "Latitude": 44.814030,
      "Longitude": -68.789150
    }
  }, {
    "Geometry": {
      "Latitude": 44.813780,
      "Longitude": -68.789320
    }
  }, {
    "Geometry": {
      "Latitude": 44.813000,
      "Longitude": -68.789820
    }
  }, {
    "Geometry": {
      "Latitude": 44.811730,
      "Longitude": -68.790720
    }
  }, {
    "Geometry": {
      "Latitude": 44.807740,
      "Longitude": -68.794450
    }
  }, {
    "Geometry": {
      "Latitude": 44.804550,
      "Longitude": -68.798370
    }
  }, {
    "Geometry": {
      "Latitude": 44.803410,
      "Longitude": -68.799800
    }
  }, {
    "Geometry": {
      "Latitude": 44.802590,
      "Longitude": -68.800500
    }
  }, {
    "Geometry": {
      "Latitude": 44.802480,
      "Longitude": -68.800570
    }
  }, {
    "Geometry": {
      "Latitude": 44.802380,
      "Longitude": -68.800630
    }
  }, {
    "Geometry": {
      "Latitude": 44.802180,
      "Longitude": -68.800750
    }
  }, {
    "Geometry": {
      "Latitude": 44.801970,
      "Longitude": -68.800850
    }
  }, {
    "Geometry": {
      "Latitude": 44.798600,
      "Longitude": -68.802040
    }
  }, {
    "Geometry": {
      "Latitude": 44.794100,
      "Longitude": -68.803590
    }
  }, {
    "Geometry": {
      "Latitude": 44.793830,
      "Longitude": -68.803700
    }
  }, {
    "Geometry": {
      "Latitude": 44.793670,
      "Longitude": -68.803780
    }
  },
  /* {
      "Geometry": {
          "Latitude": 44.793440,
              "Longitude": -68.803900
      }
  }, {
      "Geometry": {
          "Latitude": 44.793160,
              "Longitude": -68.804070
      }
  }, {
      "Geometry": {
          "Latitude": 44.792960,
              "Longitude": -68.804190
      }
  }, {
      "Geometry": {
          "Latitude": 44.792680,
              "Longitude": -68.804380
      }
  }, {
      "Geometry": {
          "Latitude": 44.792320,
              "Longitude": -68.804640
      }
  }, {
      "Geometry": {
          "Latitude": 44.786920,
              "Longitude": -68.808470
      }
  }, {
      "Geometry": {
          "Latitude": 44.786890,
              "Longitude": -68.808490
      }
  }, {
      "Geometry": {
          "Latitude": 44.786600,
              "Longitude": -68.808700
      }
  }, {
      "Geometry": {
          "Latitude": 44.786230,
              "Longitude": -68.808980
      }
  }, {
      "Geometry": {
          "Latitude": 44.786020,
              "Longitude": -68.809120
      }
  },  */
  {
    "Geometry": {
      "Latitude": 44.785640,
      "Longitude": -68.809400
    }
  }, {
    "Geometry": {
      "Latitude": 44.785180,
      "Longitude": -68.809770
    }
  }, {
    "Geometry": {
      "Latitude": 44.784990,
      "Longitude": -68.809940
    }
  }, {
    "Geometry": {
      "Latitude": 44.784450,
      "Longitude": -68.810470
    }
  }, {
    "Geometry": {
      "Latitude": 44.784270,
      "Longitude": -68.810680
    }
  }, {
    "Geometry": {
      "Latitude": 44.783960,
      "Longitude": -68.811040
    }
  }, {
    "Geometry": {
      "Latitude": 44.783750,
      "Longitude": -68.811310
    }
  }, {
    "Geometry": {
      "Latitude": 44.783530,
      "Longitude": -68.811570
    }
  }, {
    "Geometry": {
      "Latitude": 44.783400,
      "Longitude": -68.811740
    }
  }, {
    "Geometry": {
      "Latitude": 44.782900,
      "Longitude": -68.812470
    }
  }, {
    "Geometry": {
      "Latitude": 44.782760,
      "Longitude": -68.812680
    }
  }, {
    "Geometry": {
      "Latitude": 44.782620,
      "Longitude": -68.812900
    }
  }, {
    "Geometry": {
      "Latitude": 44.782450,
      "Longitude": -68.813150
    }
  }, {
    "Geometry": {
      "Latitude": 44.782340,
      "Longitude": -68.813350
    }
  }, {
    "Geometry": {
      "Latitude": 44.782230,
      "Longitude": -68.813570
    }
  }, {
    "Geometry": {
      "Latitude": 44.782020,
      "Longitude": -68.813980
    }
  }, {
    "Geometry": {
      "Latitude": 44.781840,
      "Longitude": -68.814370
    }
  }, {
    "Geometry": {
      "Latitude": 44.781790,
      "Longitude": -68.814490
    }
  }, {
    "Geometry": {
      "Latitude": 44.781640,
      "Longitude": -68.814810
    }
  }, {
    "Geometry": {
      "Latitude": 44.781540,
      "Longitude": -68.815080
    }
  }, {
    "Geometry": {
      "Latitude": 44.780980,
      "Longitude": -68.816730
    }
  }, {
    "Geometry": {
      "Latitude": 44.780470,
      "Longitude": -68.819040
    }
  }, {
    "Geometry": {
      "Latitude": 44.780370,
      "Longitude": -68.819630
    }
  }, {
    "Geometry": {
      "Latitude": 44.779180,
      "Longitude": -68.828500
    }
  }, {
    "Geometry": {
      "Latitude": 44.777820,
      "Longitude": -68.838660
    }
  }, {
    "Geometry": {
      "Latitude": 44.776430,
      "Longitude": -68.848970
    }
  }, {
    "Geometry": {
      "Latitude": 44.775570,
      "Longitude": -68.853390
    }
  }, {
    "Geometry": {
      "Latitude": 44.774960,
      "Longitude": -68.855750
    }
  }, {
    "Geometry": {
      "Latitude": 44.772540,
      "Longitude": -68.863700
    }
  }, {
    "Geometry": {
      "Latitude": 44.770830,
      "Longitude": -68.869140
    }
  }, {
    "Geometry": {
      "Latitude": 44.770790,
      "Longitude": -68.869270
    }
  }, {
    "Geometry": {
      "Latitude": 44.770750,
      "Longitude": -68.869400
    }
  }, {
    "Geometry": {
      "Latitude": 44.770040,
      "Longitude": -68.871710
    }
  }, {
    "Geometry": {
      "Latitude": 44.768590,
      "Longitude": -68.876700
    }
  }, {
    "Geometry": {
      "Latitude": 44.767780,
      "Longitude": -68.880520
    }
  }, {
    "Geometry": {
      "Latitude": 44.767660,
      "Longitude": -68.881240
    }
  }, {
    "Geometry": {
      "Latitude": 44.766610,
      "Longitude": -68.887230
    }
  }
];

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="info"></div>
<div id="map" style="border: 2px solid #3872ac;"></div>

Answer 2

如果您已经有一个存储在 JSON 数据中的 100 个地址的预优化列表（如您所说）：

[
  {
    lat:36,
    lng:-80
  },
  {
    lat:37,
    lng:-81
  }
]

然后您可以使用循环使用 Directions API 获取每个位置之间的折线，然后将折线打印到地图上。

var map;
var director;

function initialize() {
  var mapOptions = {
    center: { lat: -34.397, lng: 150.644},
    zoom: 8
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  director = new google.maps.DirectionsService();
}
google.maps.event.addDomListener(window, 'load', initialize);

var json = [{lat:36, lng:-80}, {lat:37, lng:-81} ...... ]; //loaded using Ajax, copy and pasted to string, etc.
var pts = json.map(function(a){return new google.maps.LatLng(a.lat, a.lng0)});

var polylines = [];

function get(start, end, delay){
  setTimeout(function(){
    director.route({
      origin:start,
      destination:end,
      travelMode:google.maps.TravelMode.DRIVING //or whatever mode you want
    }, function(results, status){
      if(status === 'OK'){
        var routePts = []
        routePts = routePts.concat.apply(routePts, results[0].routes[0].legs[0].steps.map(function(a){return a.path}));
        polylines.push(new google.maps.Polyline({
          path:routePts,
          map:map
        }));
      }
    });
  }, delay);
}

function putToMap(){
  for(var i=0; i<pts.length-1; i++){
    get(pts[i], pts[i+1], i*200);
    var m = new google.maps.Marker({
      position:pts[i],
      map:map
    });
  }
  var m = new google.maps.Marker({
    position:pts[pts.length-1],
    map:map
  });
}

希望这将具有适当的可读性和精简性，足以满足您的需求。如果我是正确的，你已经优化了你的点，并存储在某种 JSON 中。由于我不确切知道您的 JSON 是如何配置的，因此我举了一个通用示例。它需要根据您的情况进行更新。

本质上，它所做的是获取所有点，并在超时后为它们获取方向。花费更少的时间，您可以将航路点集成到其中。我选择不用于演示目的。它将路线的折线添加到折线数组（用于存储），并将其绘制到地图上。同时它还会在地图上绘制一个标记。