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

时间：2015-06-29 07:09:37

标签： javascript google-maps google-maps-api-3

我很难尝试在一张地图中显示多条路线，每条路线使用超过10个航路点，但它只显示一条路线。你能告诉我我做错了什么吗？ 这是我在jsfiddle中的代码。 http://jsfiddle.net/agr3a07m/83/

＆＃13;
＆＃13; 
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);
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

  1. 将地图初始化放入初始化函数中。如果您重复使用calcRoute函数，则无法在那里使用它。
  2. 如果您希望地图缩放以显示所有路线，请使用公共（全局）边界对象。
  3. 请记住，DirectionsService受配额和费率限制的约束，您需要检查并报告当状态不正确时返回的状态，否则它将无声地失败。

    4. 相关问题（一条路线超过8个航路点）：Google Maps Waypoints more than 8 issue

    working fiddle

    代码段

    ＆＃13;
    ＆＃13; 
    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);
    ＆＃13; 
    html,
body,
#dvMap {
  height: 100%;
  width: 100%;
}
    ＆＃13; 
    <script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="info"></div>
<div id="dvMap"></div>
    ＆＃13;
    ＆＃13;
    ＆＃13;

相关问题
最新问题