Google地图指向超过8个问题 [英] Google Maps Waypoints more than 8 issue

问题描述

有很多示例/代码可以在线创建使用多个航点的Google地图。我通过排除所有标记创建了相似版本的代码，单击按钮..等等。

我使用google maps V3航点在多个目的地之间创建路线。由于我们无法使用多于8个航点，我正在使用批处理多个航点。下面有19个GPS位置，其中10个GPS位置在一个批次中处理，另外9个位置处理。调用 drawRouteMap 函数为10个（或更少）gps位置绘制路线。

There are lot of examples/code available online for creating Google map using multiple waypoints. I have created the similar version of codes available by excluding all the markers , click buttons ..etc.

问题是每个函数调用都会覆盖Google地图.Google地图的输出显示最新处理值。任何人都可以建议我在哪里出错

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. drawRouteMap function is called to draw the route for the set of 10 (or lesser) gps locations.

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 

推荐答案

您需要为DirectionsRenderer创建一个单独的实例你想在地图上显示每条路线。

解决方案

You need to create a separate instance of the DirectionsRenderer for each route you want to display on the map.

工作小提琴（但你可能想连接两条路线）

工作小提琴与共同点

工作代码片段：

working fiddle (but you probably want to connect the two routes)

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%
}

：

>

这篇关于Google地图指向超过8个问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！