Google Maps Waypoints超过8期

Question

There are lot of examples/code available online for creating Google map using multiple waypoints. 在线有很多示例/代码可用于使用多个路标创建Google地图。 I have created the similar version of codes available by excluding all the markers , click buttons ..etc. 我通过排除所有标记，单击按钮..etc创建了可用的相似版本的代码。

I am using google maps V3 waypoints to create routes between multiple destinations.Since we cant use more than 8 waypoints , I am processing the multiple waypoints using batches .In the code below there are 19 gps locations in which 10 gps locations are processed in one batch and 9 in another. 我正在使用google maps V3航路点在多个目的地之间创建路线。由于我们不能使用8个以上的航路点，因此我正在使用批处理方式处理多个航路点。在下面的代码中有19 gps位置，其中10 gps位置被一次处理批处理和另一个9。 drawRouteMap function is called to draw the route for the set of 10 (or lesser) gps locations. 调用drawRouteMap函数以绘制10个（或更少）gps位置的集合的路线。

The issue is Google map is being overridden in each function call.The output of the Google map shows the latest processed values .Anyone could suggest me where i am going wrong 问题是谷歌地图在每个函数调用中都被覆盖。谷歌地图的输出显示了最新处理的值。任何人都可以建议我我要去哪里了

<!DOCTYPE html>
<html>
  <head>
      <title></title>
</head>
<body>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">


var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function calcRoute() {

  map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
  var msg ="41.077354,-81.511337:41.080647,-81.516579:41.077435,-81.521561:41.075253,-81.521492:41.074604,-81.520309:41.07415,-81.516335:41.073158,-81.514931:41.070534,-81.516563:41.066677,-81.516502:41.063942,-81.516502:41.06514,-81.513458:41.067383,-81.513412:41.069546,-81.513397:41.070778,-81.513382:41.072514,-81.512619:41.071106,-81.507614:41.073326,-81.506195";
  var input_msg=msg.split(":");
  var locations = new Array();      

  for (var i = 0; i < input_msg.length; i++) {
    var tmp_lat_lng =input_msg[i].split(",");
    locations.push(new google.maps.LatLng(tmp_lat_lng[0], tmp_lat_lng[1])); 
  }

  directionsDisplay = new google.maps.DirectionsRenderer();

  var mapOptions = {
  center: locations[0],
  zoom: 12,
  mapTypeId: google.maps.MapTypeId.ROADMAP  
  }
  directionsDisplay.setMap(map);

  var i =locations.length;
  var index =0;

  while(i !=0 ){

        if(i<3){
          var tmp_locations =new Array();
          for (var j=index;j<locations.length;j++) {
            tmp_locations.push(locations[index]);
          }
        drawRouteMap(tmp_locations); 
        i=0; 
        index=locations.length;  
       }

        if( i>= 3 && i<=10) {
           alert("before :fun < 10: i value "+i+" index value"+index);
           var tmp_locations =new Array();
           for (var j=index;j<locations.length;j++) {
             tmp_locations.push(locations[j]);
           }
        drawRouteMap(tmp_locations);
        i=0;
        index=locations.length;
        alert("after fun < 10: i value "+i+" index value"+index);
        }

        if(i > 10) {
        alert("before :fun > 10: i value "+i+" index value"+index);
        var tmp_locations =new Array();
        for (var j=index;j<index+10;j++) {
         tmp_locations.push(locations[j]);
        }
        drawRouteMap(tmp_locations);
        i=i-10; 
        index =index+10;
        alert("after fun > 10: i value "+i+" index value"+index);
        }
   }
}


 function drawRouteMap(locations){

  var start,end;
  var waypts = [];

  for(var k =0;k<locations.length;k++){
  if (k>=1 && k<=locations.length-2) {
      waypts.push({
          location:locations[k],
          stopover:true});
  }
  if(k==0) 
    start=locations[k];

  if(k==locations.length-1) 
     end=locations[k];

 }
   var request = {
      origin: start,
      destination: end,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING
  };
      console.log(request);
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
            console.log(status);
      directionsDisplay.setDirections(response);
    }
  });


 }

google.maps.event.addDomListener(window, 'load', calcRoute);
    </script>
    <div id="dvMap" style="width: 500px; height: 500px">
    </div>
  </body>
</html>

Answer 1

You need to create a separate instance of the DirectionsRenderer for each route you want to display on the map. 您需要为要在地图上显示的每条路线创建一个DirectionsRenderer的单独实例。

var directionsDisplay = [];
var directionsService = [];
var map = null;
var bounds = null;

 function drawRouteMap(locations){

  var start,end;
  var waypts = [];

  for(var k =0;k<locations.length;k++){
  if (k>=1 && k<=locations.length-2) {
      waypts.push({
          location:locations[k],
          stopover:true});
  }
  if(k==0) 
    start=locations[k];

  if(k==locations.length-1) 
     end=locations[k];

 }
   var request = {
      origin: start,
      destination: end,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING
  };
      console.log(request);

  directionsService.push(new google.maps.DirectionsService());
  var instance = directionsService.length-1;
     directionsDisplay.push(new google.maps.DirectionsRenderer({preservViewport:true}));
  directionsDisplay[instance].setMap(map);
  directionsService[instance].route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      console.log(status);
      if (!bounds) bounds = response.bounds;
      else bounds.union(response.bounds);
      directionsDisplay[instance].setDirections(response);
      if (instance > 0) map.fitBounds(bounds);
    }
  });
 }

working fiddle (but you probably want to connect the two routes) 工作提琴（但您可能想将两条路线连接起来）

working fiddle with common point 与共同点一起工作

working code snippet: 工作代码段：

 var directionsDisplay = []; var directionsService = []; var map = null; function calcRoute() { var msg = "41.077354,-81.511337:41.080647,-81.516579:41.077435,-81.521561:41.075253,-81.521492:41.074604,-81.520309:41.07415,-81.516335:41.073158,-81.514931:41.070534,-81.516563:41.066677,-81.516502:41.063942,-81.516502:41.06514,-81.513458:41.067383,-81.513412:41.069546,-81.513397:41.070778,-81.513382:41.072514,-81.512619:41.071106,-81.507614:41.073326,-81.506195"; var input_msg = msg.split(":"); var locations = new Array(); var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < input_msg.length; i++) { var tmp_lat_lng = input_msg[i].split(","); locations.push(new google.maps.LatLng(tmp_lat_lng[0], tmp_lat_lng[1])); bounds.extend(locations[locations.length-1]); } var mapOptions = { // center: locations[0], zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('dvMap'), mapOptions); map.fitBounds(bounds); google.maps.event.addDomListener(window,'resize',function() { google.maps.event.trigger(map,'resize'); map.fitBounds(bounds); }); var i = locations.length; var index = 0; while (i != 0) { if (i < 3) { var tmp_locations = new Array(); for (var j = index; j < locations.length; j++) { tmp_locations.push(locations[index]); } drawRouteMap(tmp_locations); i = 0; index = locations.length; } if (i >= 3 && i <= 10) { console.log("before :fun < 10: i value " + i + " index value" + index); var tmp_locations = new Array(); for (var j = index; j < locations.length; j++) { tmp_locations.push(locations[j]); } drawRouteMap(tmp_locations); i = 0; index = locations.length; console.log("after fun < 10: i value " + i + " index value" + index); } if (i >= 10) { console.log("before :fun > 10: i value " + i + " index value" + index); var tmp_locations = new Array(); for (var j = index; j < index + 10; j++) { tmp_locations.push(locations[j]); } drawRouteMap(tmp_locations); i = i - 9; index = index + 9; console.log("after fun > 10: i value " + i + " index value" + index); } } } function drawRouteMap(locations) { var start, end; var waypts = []; for (var k = 0; k < locations.length; k++) { if (k >= 1 && k <= locations.length - 2) { waypts.push({ location: locations[k], stopover: true }); } if (k == 0) start = locations[k]; if (k == locations.length - 1) end = locations[k]; } var request = { origin: start, destination: end, waypoints: waypts, travelMode: google.maps.TravelMode.DRIVING }; console.log(request); directionsService.push(new google.maps.DirectionsService()); var instance = directionsService.length - 1; directionsDisplay.push(new google.maps.DirectionsRenderer({ preserveViewport: true })); directionsDisplay[instance].setMap(map); directionsService[instance].route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { console.log(status); directionsDisplay[instance].setDirections(response); } }); } google.maps.event.addDomListener(window, 'load', calcRoute);

 html, body, #dvMap { height: 100%; width: 100% }

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="dvMap"></div>

Google Maps Waypoints超过8期

问题描述

1 个解决方案

解决方案1
3 已采纳 2014-12-24 21:08:03

Google Maps Waypoints超过8期

问题描述

1 个解决方案

解决方案1 3 已采纳 2014-12-24 21:08:03

解决方案1
3 已采纳 2014-12-24 21:08:03