Mam projekt Google Maps i chcę zrobić tablicę, aby utworzyć wiele tras za pomocą wskazówek. Na przykład klikam mapę i pojawia się znacznik o nazwie „A”, a gdy kliknę drugi raz, wyświetlam znacznik o nazwie „B”. Ok, to działa.

Ale kiedy klikam po raz trzeci, chcę wyświetlić nowy punkt „A”, a po raz czwarty nowy „B”, nie trzeba kasować drugiej trasy. Chcę tylko wyświetlać wiele tras, wiem, że muszę utworzyć tablicę, ale nie wiem, gdzie umieścić tablicę, itd. Opublikuję tutaj mój kod, jeśli ktoś może stworzyć dla mnie przykład tak pomocny.

To jest mój przykład

I to był mój wznowiony kod bez wielu tras:

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

To jest rozdzielczość:

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

        }
 });
}