在 Google Maps v3 上加载多条路线

Question

我想在谷歌地图上渲染多条路线，例如，如果我点击一个路线的A点标记，它会渲染这条路线，如果我点击另一个标记，它会绘制另一条路线，我尝试这样做，但它会在我的数据库上加载相同的路由，我有多个 ID，我想用它来定义我将呈现的路由。

所以，我会把我的例子和我的代码发布给你理解。

This 是我创建路线的项目 而this 是加载路由的项目

这是我的加载项目脚本：

var map, ren, ser;
var data = {};
var data2 = {};
var directionsDisplay;
var directionResult = [];
var rotaArray = [];

var directionsService = new google.maps.DirectionsService();

var infowindow;

function goma() 
{
   map = new google.maps.Map( document.getElementById('mappy'), {'zoom':12, 'mapTypeId': google.maps.MapTypeId.ROADMAP, 'center': new google.maps.LatLng(-23.611654, -46.700329)});
      var infoWindow = new google.maps.InfoWindow;      

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


  downloadUrl("rotasXML.php", function(data) {

        var rotasXML = data.responseXML;
        var rotas = rotasXML.documentElement.getElementsByTagName("rota");

    for (var i = 0; i < rotas.length; i++ ) 

        {
          var id = rotas[i].getAttribute("id"); 

         var latA =   parseFloat(rotas[i].getAttribute("latA"));
         var lngA = parseFloat(rotas[i].getAttribute("lngA"));
          var latB =   parseFloat(rotas[i].getAttribute("latB"));
         var lngB = parseFloat(rotas[i].getAttribute("lngB"));

          var rotaB = new google.maps.LatLng(
              parseFloat(rotas[i].getAttribute("latB")),
              parseFloat(rotas[i].getAttribute("lngB")));


          var rotaA = new google.maps.LatLng(latA,lngA);

        var html = "<b> Marker " + id + "</b> <br/>", 
               html = html + "FROM  "+latA+" : "+lngA;
               html = html + "<br/>To  "+latB +" : "+lngB;
               var parameter = id+","+latA+","+lngA+","+latB+","+lngB;

               html = html + "<br/><button onclick='doIt("+id+ latA+ latB+ lngA+ lngB+")'>Load Route</button>";

             var wayA = new google.maps.Marker({
            map: map,
            position: rotaA
          });
           rotaArray.push(wayA);
           bindInfoWindow(wayA, map, infoWindow, html);
            }       
      });

      function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }

       function downloadUrl(url2, callback) {
      var jax = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      jax.onreadystatechange = function() 
      {
        if (jax.readyState == 4) {
          jax.onreadystatechange = doNothing;
          callback(jax, jax.sts);
        }
      };

      jax.open('GET', url2, true);
      jax.send(null);  
       }

         function doIt(id,latA, latB, lngA, lngB){
      alert(id);

        ser.route({
        'origin':new google.maps.LatLng(latA, lngA),
        'destination':new google.maps.LatLng(latB, lngB), 
        'travelMode': google.maps.DirectionsTravelMode.DRIVING}, 
                    function(response){ 
        ren.setDirections(response);



            }); 


    }
      function setAllMap(map) {
        for (var i = 0; i < rotaArray.length; i++) {
          rotaArray[i].setMap(map);
        }
      }

      function clearOverlays() {
        setAllMap(null);
      }

      function deleteOverlays() {
        clearOverlays();
        rotaArray = [];
      }
}

我想点击航点并渲染正确的路线

Answer 1

要选择标记以显示路线，您需要数组来保存标记

var markerArray  = [];

以及路线坐标

 var routeArray =[[],[],[],[],[]];

这是加载标记的代码

  // Change this depending on the name of your PHP file
    downloadUrl("phpsqlajax_genxml.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    alert(markers.length);
    for (var i = 0; i < markers.length+1; i++) {
      id = markers[i].getAttribute("id");
      var latA = parseFloat(markers[i].getAttribute("latA"));
      var lngA = parseFloat(markers[i].getAttribute("lngA"));
      var latB = parseFloat(markers[i].getAttribute("latB"));
      var lngB = parseFloat(markers[i].getAttribute("lngB"));
      //fill routeArray
      routeArray[i].push(id);
      routeArray[i].push(latA);
      routeArray[i].push(lngA);
      routeArray[i].push(latB);
      routeArray[i].push(lngB);
      var point = new google.maps.LatLng(latA,lngA);
      //Build html for Infowindow
      var html = "<b> Marker " + id + "</b> <br/>", 
           html = html + "FROM  "+latA+" : "+lngA;
           html = html + "<br/>To  "+latB +" : "+lngB;
           var parameter = id+","+latA.toString()+","+lngA.toString()+","+latB.toString()+","+lngB.toString();
           html = html + "<br/><button onclick='doIt("+id+")'>Load Route</button>";
       var marker = new google.maps.Marker({
        map: map,
        position: point,
      });
      //marker array to allow clearin markers
       markerArray.push(marker);
       bindInfoWindow(marker, map, infoWindow, html);
          
    }
  }
  

以及加载路由的代码（从 doIt() 调用）

function calcRoute(latAa,lngAa,latBa,lngBa) {
var start = new google.maps.LatLng(latAa,lngAa);
var end =  new google.maps.LatLng(latBa,lngBa);
var request = {
    origin: start, 
    destination: end,
    travelMode: google.maps.DirectionsTravelMode.DRIVING,
    unitSystem: google.maps.UnitSystem.IMPERIAL
};
directionsService.route(request, function(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
    directionsDisplay.setDirections(response);
    var route = response.routes[0];
    var summaryPanel = document.getElementById("directions_panel");
    summaryPanel.innerHTML = "";
    // For each route, display summary information.
    i = 0;
      summaryPanel.innerHTML += "From "+route.legs[i].start_address + " <br /> ";
      summaryPanel.innerHTML += "To "+route.legs[i].end_address + "<br />";
      summaryPanel.innerHTML += "Distance: "+route.legs[i].distance.text + "<br />";
      distance = parseFloat(route.legs[i].distance.text)*rate;
      
    }
});

}

function doIt(id){
  //Convert for array zero index
  id = id-1;
  var latAa= routeArray[id][1];
  var lngAa= routeArray[id][2];
  var latBa= routeArray[id][3];
  var lngBa= routeArray[id][4];
  clearOverlays();
  calcRoute(latAa,lngAa,latBa,lngBa);
  }

这个DEMO 显示结果

您必须相应地修改您的代码。请注意，还有其他功能可以清除源代码中可以看到的标记