Множество маршрути с повече от 10 точки

Трудно ми е да опитам да покажа няколко маршрута в една карта, като използвам повече от 10 точки за всеки маршрут, но тя показва само един маршрут. Можете ли да ми кажете какво правя грешно? Ето моят код в jsfiddle. http://jsfiddle.net/agr3a07m/83/

var directionsDisplay = [];
var directionsService = [];
var map = null;
var m = [
    '33.2970431149,130.5494435901',
    '33.3005149987,130.5513321623',
    '33.304042372,130.5497765735',
    '33.3104305379,130.5474986907',
    '33.3102360342,130.542915747',
    '33.3117635011,130.5344719334',
    '33.3111524907,130.536499571',
    '33.3132632805,130.531027706',
    '33.314679737,130.5276668088',
    '33.3129298155,130.5214451838',
    '33.3135130049	,130.5167788778',
    '33.3143184142,130.5133346823',
    '33.3151238268	,130.5100849151',

];
var msg = [
    '33.3288994858,	130.4731429044',
    '33.3265106749	,130.462977192',
    '33.3257329153,130.4592553147',
    '33.3248161541,130.4482284949',
    '33.324871548,130.4393125661',
    '33.3246214636,130.4329519947',
    '33.3260100846,130.4261191649',
    '33.3294818525,130.4213693995',
    '33.3319258968,130.4134255023',
    '33.3276762737,130.4089816226',
    '33.3239542905,130.3998714394',

];
var ms = [
    '33.8088548609,130.8573666723',
    '33.8100491378	,130.8550890287',
    '33.8121044172	,130.8518669794',
    '33.8141319684	,130.8513113767',
    '33.8159373595	,130.8529500463',
    '33.818687093	,130.8545331216',
    '33.8213534993	,130.8559495478',
    '33.8218257146	,130.8584493185',
    '33.8246587318	,130.8576992503',
    '33.8281028031	,130.857421337',
    '33.8323801257	,130.8575600175',
    '33.8360186793	,130.8606429272',
    '33.8385461993	,130.8613649731',
    '33.8415736984	,130.8639479525',
    '33.8455733138	,130.8664197853',
    '33.8484063873	,130.8688916718',
    '33.8514059878	,130.8643919073',

];
    function init(){
    calcRoute(msg);
    calcRoute(m);
    calcRoute(ms);
    
    
    }
function calcRoute(f) {


    var input_msg = f;
    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);

    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[j]);
            }
            drawRouteMap(tmp_locations);
            i = 0;
            index = locations.length;
        }
*/
        if ( 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, a) {

    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({
        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', init);


person Backhandx    schedule 29.06.2015    source източник
comment
един проблем, който може да имате, е, че вашите координати като '33.3117635011,130.5344719334' са низове. Дори когато ги разделите на техните части за ширина/дължина, те все още са низове. Така че можете да опитате new google.maps.LatLng(parseFloat(tmp_lat_lng[0]), parseFloat(tmp_lat_lng[1]))   -  person duncan    schedule 29.06.2015
comment
Редактирам кода си и сега чертае само един маршрут, а не 3. Ето го кода ми.   -  person Backhandx    schedule 29.06.2015
comment
Кодът, който имате в блоковете if (i < 3) {...} и if (i >= 3 && i <= 10) {...}, е идентичен (с изключение на изразите console.log). Не разбирам смисъла да е в два отделни блока   -  person duncan    schedule 29.06.2015
comment
Откъде взехте оригиналния код? Виждам коментиран код, който е необходим, за да работи. Имате само един обект DirectionsService, но го използвате повторно. Javascript API на Google Maps (безплатна версия) позволява само 8 точки в една заявка за упътване.   -  person geocodezip    schedule 29.06.2015
comment
коригирам го. Моля, намерете модификацията тук: jsfiddle.net/agr3a07m/84   -  person Backhandx    schedule 29.06.2015


Отговори (1)


  1. поставете инициализацията на картата във функцията за инициализация. Ако използвате повторно функцията calcRoute, не можете да я имате там.
  2. Ако искате картата да е увеличена, за да показва всички маршрути, използвайте общ (глобален) обект за граници.
  3. Не забравяйте, че DirectionsService е предмет на квота и ограничение на скоростта, трябва да проверите и докладвате върнатия статус, когато не е „OK“, в противен случай ще се провали безшумно.

Свързан въпрос (един маршрут с повече от 8 междинни точки): Google Maps Waypoints повече от 8 проблем

работеща цигулка

кодов фрагмент:

var directionsDisplay = [];
var directionsService = [];
var map = null;
var bounds = new google.maps.LatLngBounds();
var m = [
  '33.2970431149,130.5494435901',
  '33.3005149987,130.5513321623',
  '33.304042372,130.5497765735',
  '33.3104305379,130.5474986907',
  '33.3102360342,130.542915747',
  '33.3117635011,130.5344719334',
  '33.3111524907,130.536499571',
  '33.3132632805,130.531027706',
  '33.314679737,130.5276668088',
  '33.3129298155,130.5214451838',
  '33.3135130049,130.5167788778',
  '33.3143184142,130.5133346823',
  '33.3151238268,130.5100849151'
];
var msg = [
  '33.3288994858,130.4731429044',
  '33.3265106749,130.462977192',
  '33.3257329153,130.4592553147',
  '33.3248161541,130.4482284949',
  '33.324871548,130.4393125661',
  '33.3246214636,130.4329519947',
  '33.3260100846,130.4261191649',
  '33.3294818525,130.4213693995',
  '33.3319258968,130.4134255023',
  '33.3276762737,130.4089816226',
  '33.3239542905,130.3998714394'
];
var ms = [
  '33.8088548609,130.8573666723',
  '33.8100491378,130.8550890287',
  '33.8121044172,130.8518669794',
  '33.8141319684,130.8513113767',
  '33.8159373595,130.8529500463',
  '33.818687093,130.8545331216',
  '33.8213534993,130.8559495478',
  '33.8218257146,130.8584493185',
  '33.8246587318,130.8576992503',
  '33.8281028031,130.857421337',
  '33.8323801257,130.8575600175',
  '33.8360186793,130.8606429272',
  '33.8385461993,130.8613649731',
  '33.8415736984,130.8639479525',
  '33.8455733138,130.8664197853',
  '33.8484063873,130.8688916718',
  '33.8514059878,130.8643919073'
];

function init() {
  var mapOptions = {
    // center: locations[0],
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
  calcRoute(msg);
  calcRoute(m);
  calcRoute(ms);


}

function calcRoute(f) {
  var input_msg = f;
  var locations = new Array();
  //alert(f);
  for (var i = 0; i < input_msg.length; i++) {
    var tmp_lat_lng = input_msg[i].split(",");
    locations.push(new google.maps.LatLng(parseFloat(tmp_lat_lng[0]), parseFloat(tmp_lat_lng[1])));
    bounds.extend(locations[locations.length - 1]);
  }



  map.fitBounds(bounds);

  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[j]);
      }
      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;
      console.log("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 - 9;
      index = index + 9;
      console.log("after fun > 10: i value " + i + " index value" + index);
    }
  }


}
j = 0;

function drawRouteMap(locations) {
  j++;
  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({
    preserveViewport: true
  }));
  // var instance = directionsDisplay.length - 1;
  //  directionsDisplay[instance].setMap(map);
  directionsService[instance].route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      // alert(status);
      if (directionsDisplay && directionsDisplay[instance]) {
        directionsDisplay[instance].setMap(map);
        directionsDisplay[instance].setDirections(response);
      } else {
        document.getElementById('info').innerHTML += "instance=" + instance + " doesn't exist<br>";
      }
    } else {
      document.getElementsById('info').innerHTML += "instance=" + instance + " status=" + status + "<br>";
    }
  });
  // alert(instance);

}
google.maps.event.addDomListener(window, 'load', init);
html,
body,
#dvMap {
  height: 100%;
  width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="info"></div>
<div id="dvMap"></div>

person geocodezip    schedule 29.06.2015
comment
Чудя се дали е възможно да се анимира маркер по всеки маршрут? - person Backhandx; 29.06.2015