Javascript 用于在Google Maps v3上创建多条路由的数组

我有一个谷歌地图项目，我想做一个数组，使用方向创建多条路线。 例如，我单击地图并显示一个名为“a”的标记，当我第二次单击时，显示一个名为“B”的标记。好的，这是有效的

但是，当我第三次单击时，我想显示一个新的“a”点，第四次单击一个新的“B”点，不需要删除另一条路线。我只想显示多个路由，我知道我需要创建一个数组，但我不知道我把数组放在哪里，等等。我将在这里发布我的代码，如果有人能为我创建一个示例，将非常有用

这是我恢复的代码，没有多个路由：

var wayA ;
var wayB;
var doRoute = true;

 if (doRoute == true){
      doRoutes();   
  }    
function doRoutes()
{   
    google.maps.event.addListener(map, "click", function(event) {

        if (!wayA) {
        wayA = new google.maps.Marker({

          position: event.latLng,
          map: map            
        });
        }else if (wayA){
        wayB = new google.maps.Marker({

          position: event.latLng,
          map: map

        });         

        ren = new google.maps.DirectionsRenderer( {'draggable':true} );
    ren.setMap(map);
    ren.setPanel(document.getElementById("directionsPanel"));
    ser = new google.maps.DirectionsService();

ser.route({ 'origin': wayA.getPosition(), 'destination':  wayB.getPosition(), 'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) {
        if(sts=='OK')ren.setDirections(res);    
        })          
        }
 });
}     
}

决议如下：

var map, ren, ser;
var data = {};
var data2 = {};
var marker;
var infowindow;
 var doMark = true ;
var directionsDisplay;
var wayA = [];
var wayB = [];
var directionResult = [];

//Initialize

function goma()
{

    var mapDiv = document.getElementById('mappy');

    var mapOptions = {
    zoom: 12, 

    center: new google.maps.LatLng(-23.563594, -46.654239),
    mapTypeId : google.maps.MapTypeId.ROADMAP
    }

    map = new google.maps.Map( mapDiv, mapOptions );


  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);

  google.maps.event.addDomListener(control, 'click', function() {
    doMark = false;
     markNow();

  });

 google.maps.event.addListener(map, "click", function(event) {
        if (wayA.length == wayB.length) {
        wayA.push(new google.maps.Marker({
      draggable: true,      
          position: event.latLng,
          map: map

        }));
        } else {
        wayB.push(new google.maps.Marker({
      draggable: true,  
          position: event.latLng,
          map: map

        }));


    ren = new google.maps.DirectionsRenderer( {'draggable':true} );
    ren.setMap(map);
    ren.setPanel(document.getElementById("directionsPanel"));
    ser = new google.maps.DirectionsService();

    ser.route({ 'origin': wayA[wayA.length-1].getPosition(), 'destination':  wayB[wayB.length-1].getPosition(), 'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) {
        if(sts=='OK') {
                    directionResult.push(res);
                    ren.setDirections(res); 
                } else {
                    directionResult.push(null);
                }
    })      

        }
 });
}  

根据我和你的

这就是你所说的你想要的：

代码片段：

var映射，ren，ser；
变量数据={}；
var data2={}；
var标记；
var信息窗口；
var-doMark=true；
var方向显示；
var wayA=[]；
var wayB=[]；
var directionResult=[]；
//伊尼西奥乐趣酒店
函数goma（）{
var mapDiv=document.getElementById（'mappy'）；
变量映射选项={
缩放：12，
中心：新google.maps.LatLng（-23.563594，-46.654239），
mapTypeId:google.maps.mapTypeId.ROADMAP
}
//Cria o mapa do google、科洛卡作为mapa的定义、科莫蒂波可视化、pode ser路线图、卫星、混合、地形
map=新的google.maps.map（mapDiv，mapOptions）；
var control=document.createElement（'DIV'）；
control.style.padding='1px'；
control.style.border='1px solid#000'；
control.style.backgroundColor='白色'；
control.style.cursor='pointer'；
control.innerHTML=''；
控制指数=1；
map.controls[google.maps.ControlPosition.TOP\u RIGHT].push（控件）；
google.maps.event.addDomListener（控件，'click'，函数（）{
doMark=false；
markNow（）；
});
google.maps.event.addListener（映射，“单击”，函数（事件）{
如果（wayA.length==wayB.length）{
推送（新的google.maps.Marker）({
真的，
位置：event.latLng，
地图：地图
}));
}否则{
wayB.push（新的google.maps.Marker）({
真的，
位置：event.latLng，
地图：地图
}));
//在一个轮换中，在一个新的航路点上
ren=新建google.maps.DirectionsRenderer({
“可拖动”：真
});
ren.setMap（map）；
setPanel（document.getElementById（“directionsPanel”）；
ser=新的google.maps.DirectionsService（）；
//Cria a rota，o方向TravelMode pode服务：驾驶、步行、骑自行车或公共交通
航线({
“原点”：wayA[wayA.length-1].getPosition（），
“目的地”：wayB[wayB.length-1]。getPosition（），
“travelMode”：google.maps.Directions travelMode.DRIVING
}，函数（res，sts）{
如果（sts=='OK'）{
方向结果推送（res）；
(二)；
}否则{
directionResult.push（空）；
}
})
}
});
}
var html=“”+
“诺姆：”+
“Endereco：”+
“蒂波：”+
“奥菲西纳”+
“餐馆”+
" " +
"";
infowindow=新建google.maps.infowindow({
内容：html
});
//地理编码（pesquisar）
函数marcar（）{
var endereco=document.getElementById（“endereco”）.value；
//警报（endereco）
geocoder=新的google.maps.geocoder（）；
地理编码({
“地址”：endereco
}，功能（结果、状态）{
if（status=google.maps.GeocoderStatus.OK）{
latlng=results[0]。geometry.location；
markerInicio=new google.maps.Marker({
位置：latlng，
地图：地图
});
地图设置中心（latlng）；
}
});
}
函数markNow（）{
if（doMark==false）{
google.maps.event.addListener（映射，“单击”，函数（事件）{
marker=新的google.maps.marker({
位置：event.latLng，
地图：地图
});
google.maps.event.addListener（标记“单击”，函数（）{
信息窗口。打开（地图、标记）；
});
});
}
}
google.maps.event.addDomListener（窗口'load'，goma）
html，
身体{
身高：100%；
宽度：100%；
}

恩德雷科
一张地图上有多条路线和航路点

    <script>
     var map;

      var directionsService;
      var stepDisplay;

      var position;
      var marker = [];
      var polyline = [];
      var poly2 = [];
      var poly = null;
      var startLocation = [];
      var endLocation = [];
      var timerHandle = [];   

      var stops_data = [[ {"Geometry":{"Latitude":23.05242,"Longitude":72.53375}},

                          {"Geometry":{"Latitude":23.03007,"Longitude":72.59664}}

                        ] ,[ {"Geometry":{"Latitude":23.00959,"Longitude":72.56189}},
                             {"Geometry":{"Latitude":23.05754,"Longitude":72.55302}}
                           ]];

      var a,z,b;        
      var add;
      var map; 

      var speed = 0.000005, wait = 1;
      var infowindow = null;

      var myPano;   
      var panoClient;
      var nextPanoId;         

      //    var locations=new Array(new google.maps.LatLng(34.04429454929703, -118.22793351693724),new google.maps.LatLng(33.688522885631706, -116.15151750131224));

          var directionsDisplay = [];

          directionsDisplay[0] = new window.google.maps.DirectionsRenderer({
              suppressMarkers: false,
              suppressInfoWindows: true
            });


          directionsDisplay[1] = new window.google.maps.DirectionsRenderer({
              suppressMarkers: false,
              suppressInfoWindows: true
            });

          var map;
          var mapOptions = { center: new google.maps.LatLng(42.5584308, -70.8597732), zoom: 3,
            mapTypeId: google.maps.MapTypeId.ROADMAP };

          function initialize() 
          {
            map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

            directionsService = new google.maps.DirectionsService();        

         //   Setroute(locations[0],locations[1],directionsDisplay[0]);

           // Setroute(locations2[0],locations2[1],directionsDisplay[1]);


            Tour_startUp(stops_data[0]);

            window.tour.loadMap(map, directionsDisplay[0]);




            if (stops_data[0].length > 1)
                window.tour.calcRoute(stops_data[0],directionsService, directionsDisplay[0]);

            Tour_startUp(stops_data[1]);
            window.tour.loadMap(map, directionsDisplay[1]);
            window.tour.calcRoute(stops_data[1],directionsService, directionsDisplay[1]);

          }

    function Tour_startUp(stops) {

        if (!window.tour) window.tour = {
            updateStops: function (newStops) {
                stops = newStops;
            },

            loadMap: function (map, dirdis) {
                var myOptions = {
                    zoom: 15,
                    center: new window.google.maps.LatLng(51.507937, -0.076188), // default to London
                    mapTypeId: window.google.maps.MapTypeId.ROADMAP
                };
                map.setOptions(myOptions);
                dirdis.setMap(map);
            },
            calcRoute: function (stops_new,directionsService, dirdis) {
                var batches = [];
                var itemsPerBatch = 10; // google API max = 10 - 1 start, 1 stop, and 8 waypoints
                var itemsCounter = 0;
                var wayptsExist = stops_new.length > 0;
                var time= [];
                while (wayptsExist) {
                    var subBatch = [];
                    var subitemsCounter = 0;

                   // alert('second'+stops_new.length);        
            //alert(stops_new[0].Geometry.Latitude +' ===== ' +stops_new[0].Geometry.Longitude);        

                    for (var j = itemsCounter; j < stops_new.length; j++) {
                        subitemsCounter++;

                    //alert(stops[j].Geometry.Time);
                        subBatch.push({
                            location: new window.google.maps.LatLng(stops_new[j].Geometry.Latitude, stops_new[j].Geometry.Longitude),
                            stopover: true                               
                        });

                       //time.push(stops[j].Geometry.Time);

                        if (subitemsCounter == itemsPerBatch)
                            break;
                    }

                    itemsCounter += subitemsCounter;
                    batches.push(subBatch);
                    wayptsExist = itemsCounter < stops_new.length;
                    // If it runs again there are still points. Minus 1 before continuing to
                    // start up with end of previous tour leg
                    itemsCounter--;
                }

                // now we should have a 2 dimensional array with a list of a list of waypoints
                var combinedResults;
                var unsortedResults = [{}]; // to hold the counter and the results themselves as they come back, to later sort
                var directionsResultsReturned = 0;

                for (var k = 0; k < batches.length; k++) {
                    var lastIndex = batches[k].length - 1;
                    var start = batches[k][0].location;
                    var end = batches[k][lastIndex].location;

                    // trim first and last entry from array
                    var waypts = [];
                    waypts = batches[k];
                    waypts.splice(0, 1);
                    waypts.splice(waypts.length - 1, 1);

                    var request = 
                        {
                        origin: start,
                        destination: end,
                        waypoints: waypts,
                        travelMode: window.google.maps.TravelMode.WALKING
                    };

                  //  alert('start'+start);

                 //   alert('end'+end);

                    (function (kk) {
                        directionsService.route(request, function (result, status) {
                            if (status == window.google.maps.DirectionsStatus.OK) {

                                 polyline[0] = new google.maps.Polyline({
                                     path: [],
                                     strokeColor: '#FFFF00',
                                     strokeWeight: 3
                                     });


                                 poly2[0] = new google.maps.Polyline({
                                     path: [],
                                     strokeColor: '#FFFF00',
                                     strokeWeight: 3
                                     });     


                                var unsortedResult = { order: kk, result: result };
                                unsortedResults.push(unsortedResult);

                                directionsResultsReturned++;

                                if (directionsResultsReturned == batches.length) // we've received all the results. put to map
                                {
                                    // sort the returned values into their correct order
                                    unsortedResults.sort(function (a, b) { return parseFloat(a.order) - parseFloat(b.order); });
                                    var count = 0;
                                    for (var key in unsortedResults) {
                                        if (unsortedResults[key].result != null) {
                                            if (unsortedResults.hasOwnProperty(key)) {
                                                if (count == 0) // first results. new up the combinedResults object
                                                    combinedResults = unsortedResults[key].result;
                                                else {
                                                    // only building up legs, overview_path, and bounds in my consolidated object. This is not a complete
                                                    // directionResults object, but enough to draw a path on the map, which is all I need
                                                    combinedResults.routes[0].legs = combinedResults.routes[0].legs.concat(unsortedResults[key].result.routes[0].legs);
                                                    combinedResults.routes[0].overview_path = combinedResults.routes[0].overview_path.concat(unsortedResults[key].result.routes[0].overview_path);

                                                    combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(unsortedResults[key].result.routes[0].bounds.getNorthEast());
                                                    combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(unsortedResults[key].result.routes[0].bounds.getSouthWest());
                                                }
                                                count++;
                                            }
                                        }
                                    }
                                    dirdis.setDirections(combinedResults);


                                    var legs = combinedResults.routes[0].legs;

                                    var path = combinedResults.routes[0].overview_path;

                                    //alert(path.length);

                                 //  alert(legs.length);

                                  //setRoutes(legs[0].start_location,legs[legs.length-1].end_location);



                                    for (var i=0; i < legs.length;i++)
                                        {
                                              var markerletter = "A".charCodeAt(0);
                                              markerletter += i;
                                      markerletter = String.fromCharCode(markerletter);

                                      if (i == 0) { 

                                        //marker[0] = createMarker2(legs[i].start_location,"start",legs[i].start_address,"green");
                                      }

                                      var steps = legs[i].steps;

                                    //  alert('arrival time : '+legs[i].arrival_time.text);

                                //  var duration = steps.duration_in_traffic;

                                  // alert(duration.text);

                                      for (j=0;j<steps.length;j++) 
                                      {

                                          var nextSegment = steps[j].path;

                                          for (k=0;k<nextSegment.length;k++) 
                                              {
                                              polyline[0].getPath().push(nextSegment[k]);
                                              //bounds.extend(nextSegment[k]);
                                                 }
                                      }



                                    //  createMarker(directionsDisplay.getMap(),legs[i].start_location,"marker"+i,"some text for marker "+i+"<br>"+legs[i].start_address,markerletter);   
                                    }
                                        // Marker for start point 
                                    createMarker(dirdis.getMap(),legs[0].start_location,"marker"+0,"Start Point<br>"+legs[0].start_address,'A');


                                    var i=legs.length;
                                    var markerletter = "A".charCodeAt(0);
                                      markerletter += i;
                                    markerletter = String.fromCharCode(markerletter);

                                    // marker for End Point 
                                    createMarker(dirdis.getMap(),legs[legs.length-1].end_location,"marker"+i,"End Point <br>"+legs[legs.length-1].end_address,'B');

                                    polyline[0].setMap(map);

                                    //startAnimation(0);  
                                }
                            }
                        });
                    })(k);
                }
            }
        };
    }


    var icons = new Array();
    icons["red"] = new google.maps.MarkerImage("mapIcons/marker_red.png",
          // This marker is 20 pixels wide by 34 pixels tall.
          new google.maps.Size(20, 34),
          // The origin for this image is 0,0.
          new google.maps.Point(0,0),
          // The anchor for this image is at 9,34.
          new google.maps.Point(9, 34));



    function getMarkerImage(iconStr) {

    //alert(iconStr);

       if ((typeof(iconStr)=="undefined") || (iconStr==null)) { 
          iconStr = "red"; 
       }

    if(iconStr == 'A')
    {
       // for start point 


       if (!icons[iconStr]) {
          icons[iconStr] = new google.maps.MarkerImage("http://www.google.com/mapfiles/dd-start.png",
          // This marker is 20 pixels wide by 34 pixels tall.
          new google.maps.Size(20, 34),
          // The origin for this image is 0,0.
          new google.maps.Point(0,0),
          // The anchor for this image is at 6,20.
          new google.maps.Point(9, 34));
       } 

    }
    if (iconStr == 'B')
    {

        // for end point


        if (!icons[iconStr]) {
              icons[iconStr] = new google.maps.MarkerImage("http://www.google.com/mapfiles/dd-end.png",
              // This marker is 20 pixels wide by 34 pixels tall.
              new google.maps.Size(20, 34),
              // The origin for this image is 0,0.
              new google.maps.Point(0,0),
              // The anchor for this image is at 6,20.
              new google.maps.Point(9, 34));
           } 


        }
    return icons[iconStr];
    }
      // Marker sizes are expressed as a Size of X,Y
      // where the origin of the image (0,0) is located
      // in the top left of the image.

      // Origins, anchor positions and coordinates of the marker
      // increase in the X direction to the right and in
      // the Y direction down.

      var iconImage = new google.maps.MarkerImage('mapIcons/marker_red.png',
          // This marker is 20 pixels wide by 34 pixels tall.
          new google.maps.Size(20, 34),
          // The origin for this image is 0,0.
          new google.maps.Point(0,0),
          // The anchor for this image is at 9,34.
          new google.maps.Point(9, 34));



      var iconShadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',
          // The shadow image is larger in the horizontal dimension
          // while the position and offset are the same as for the main image.
          new google.maps.Size(37, 34),
          new google.maps.Point(0,0),
          new google.maps.Point(9, 34));
          // Shapes define the clickable region of the icon.
          // The type defines an HTML &lt;area&gt; element 'poly' which
          // traces out a polygon as a series of X,Y points. The final
          // coordinate closes the poly by connecting to the first
          // coordinate.
      var iconShape = {
          coord: [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0],
          type: 'poly'
      };


    function createMarker(map, latlng, label, html, color) {

    //alert(color);
    //  alert("createMarker("+latlng+","+label+","+html+","+color+")");


        var contentString = '<b>'+label+'</b><br>'+html;

        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            shadow: iconShadow,
            icon: getMarkerImage(color),
            shape: iconShape,
            title: label,
            zIndex: Math.round(latlng.lat()*-100000)<<5
            });
            marker.myname = label;

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(contentString); 
            infowindow.open(map,marker);
            });


        return marker;
    }

    function createMarkerForStops(map, latlng, label, html, color) {
        // alert("createMarker("+latlng+","+label+","+html+","+color+")");


       var contentString = '<b>'+label+'</b><br>'+html;

            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: label,
                //icon:'http://google-maps-icons.googlecode.com/files/stop.png',
                icon:'icon/stop.png',
                zIndex: Math.round(latlng.lat()*-100000)<<5
                });
                marker.myname = label;


            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent(contentString); 
                infowindow.open(map,marker);
                });
            return marker;
        }


          google.maps.event.addDomListener(window, 'load', initialize);

    </script>        
    <div id="map_canvas"></div>


var映射；
var定向服务；
var步进显示；
var位置；
var标记=[]；
var多段线=[]；
var poly2=[]；
var-poly=null；
var=[]；
var endLocation=[]；
var timerHandle=[]；
var stops_data=[[{“几何”：{“纬度”：23.05242，“经度”：72.53375}，
{“几何学”：{“纬度”：23.03007，“经度”：72.59664}
]，[{“几何学”：{“纬度”：23.00959，“经度”：72.56189}，
{“几何学”：{“纬度”：23.05754，“经度”：72.55302}
]];
变量a，z，b；
var-add；
var映射；
var速度=0.000005，等待=1；
var infowindow=null；
myPano变种；
客户机；
nextPanoId变种；
//var位置=新数组（新的google.maps.LatLng（34.04429454929703，-118.2279331693724），新的google.maps.LatLng（33.688522885631706，-116.15151750131224））；
变量方向显示=[]；
directionsDisplay[0]=new window.google.maps.DirectionsRenderer({
对:错,，
suppressInfoWindows：true
});
directionsDisplay[1]=new window.google.maps.DirectionsRenderer({
对:错,，
suppressInfoWindows：true
});
var映射；
var mapOptions={center:new google.maps.LatLng（42.5584308，-70.8597732），zoom:3，
mapTypeId:google.maps.mapTypeId.ROADMAP}；
函数初始化（）
{
map=new google.maps.map（document.getElementById（“map_canvas”），mapOptions）；
方向服务=新