具有10个以上路点的多条路线

1. 将映射初始化放入initialize函数中。如果重用calcRoute函数，就不能在其中使用它
2. 如果要缩放地图以显示所有路线，请使用公共（全局）边界对象
3. 请记住，DirectionsService受配额和费率限制，当它不"正常"时，您需要检查并报告返回的状态，否则它将以静默方式失败

相关问题（一条路线超过8个航路点）：谷歌地图航路点超过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>