Массив для создания нескольких маршрутов на Картах Google v3

У меня есть проект Google Maps, и я хочу сделать массив для создания нескольких маршрутов с использованием инструкций. Например, я нажимаю на карту и показываю маркер с именем «А», а когда я нажимаю второй раз, отобразите маркер с именем «В». Хорошо, это работает.

Но когда я нажимаю третий раз, я хочу отобразить новую точку «А», а в четвертый раз – новый «В», не нужно удалять другой маршрут. Я хочу только отображать несколько маршрутов, я знаю, что мне нужно создать массив, но я не знаю, где я помещаю массив, и т. Д. Я отправлю сюда свой код, если кто-то может создать пример для меня, будет Так полезно.

  • Как переадресовать на другую страницу * после * распечатать документ?
  • Что такое событие готовности DOM?
  • Как данные jQuery () прерывают круговую ссылку
  • Обработка ответа HTTP в сервисе
  • Как отключить выбор текста на веб-странице
  • Как проверить, является ли номер JavaScript реальным, действительным номером?
  • Это мой пример

    И это был мой возобновленный код без нескольких маршрутов:

    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); } }) } }); } 

    2 Solutions collect form web for “Массив для создания нескольких маршрутов на Картах Google v3”

    Исходя из моего предыдущего примера из вашего предыдущего вопроса

    Это то, что вы говорите, что хотите: рабочий пример с несколькими маршрутами

    Фрагмент кода:

     var map, ren, ser; var data = {}; var data2 = {}; var marker; var infowindow; var doMark = true; var directionsDisplay; var wayA = []; var wayB = []; var directionResult = []; //Função de Inicio 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 } //Cria o mapa do google, coloca as definições do mapa, como tipo de visualização, pode ser ROADMAP, SATELLITE, HYBRID, TERRAIN map = new google.maps.Map(mapDiv, mapOptions); var control = document.createElement('DIV'); control.style.padding = '1px'; control.style.border = '1px solid #000'; control.style.backgroundColor = 'white'; control.style.cursor = 'pointer'; control.innerHTML = '<img src="http://i47.tinypic.com/2dlp2fc.jpg" border="0" alt="Image and video hosting by TinyPic">'; control.index = 1; 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 })); //Renderiza a rota, o draggable é diz se o waypoint é arrastavel ou não ren = new google.maps.DirectionsRenderer({ 'draggable': true }); ren.setMap(map); ren.setPanel(document.getElementById("directionsPanel")); ser = new google.maps.DirectionsService(); //Cria a rota, o DirectionTravelMode pode ser: DRIVING, WALKING, BICYCLING ou TRANSIT 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 html = "<table>" + "<tr><td>Nome:</td> <td><input type='text' id='name'/> </td> </tr>" + "<tr><td>Endereco:</td> <td><input type='text' id='address'/></td> </tr>" + "<tr><td>Tipo:</td> <td><select id='type'>" + "<option value='oficina' SELECTED>oficina</option>" + "<option value='restaurante'>restaurante</option>" + "</select> </td></tr>" + "<tr><td></td><td><input type='button' value='Salvar' onclick='saveData()'/></td></tr>"; infowindow = new google.maps.InfoWindow({ content: html }); //Geocoding (pesquisar) function marcar() { var endereco = document.getElementById("endereco").value; //alert(endereco) geocoder = new google.maps.Geocoder(); geocoder.geocode({ 'address': endereco }, function(results, status) { if (status = google.maps.GeocoderStatus.OK) { latlng = results[0].geometry.location; markerInicio = new google.maps.Marker({ position: latlng, map: map }); map.setCenter(latlng); } }); } function markNow() { if (doMark == false) { google.maps.event.addListener(map, "click", function(event) { marker = new google.maps.Marker({ position: event.latLng, map: map }); google.maps.event.addListener(marker, "click", function() { infowindow.open(map, marker); }); }); } } google.maps.event.addDomListener(window, 'load', goma); 
     html, body { height: 100%; width: 100%; } 
     <script src="http://maps.google.com/maps/api/js"></script> <div id="mappy" style="float:left;width:70%; height:100%"></div> <div id="directionsPanel" style="float:right;width:30%;height 100%"></div> <div> <label>Endereco</label> <input type="text" id="endereco"> </div> <input type="button" value="Marcar" id="marcar" onClick="marcar()"> </div> 

    Несколько маршрутов на одной карте с путевыми точками

      <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> 
    JavaScript делает сайт умным, красочным и простым использованием.