Javascript 谷歌地图添加多条多段线_Javascript_Google Maps Api 3_Markers_Polyline

Javascript 谷歌地图添加多条多段线

javascript google-maps-api-3

Javascript 谷歌地图添加多条多段线,javascript,google-maps-api-3,markers,polyline,Javascript,Google Maps Api 3,Markers,Polyline,我正在尝试使用google.Maps.DirectionsRender创建多条多段线，但是我只显示了一条管线。如果该功能只执行几次，则将显示所有行我在上查看了其他一些与DirectionsRender的多个路由相关的问题，但是没有人提供正确的解决方案 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>

我正在尝试使用google.Maps.DirectionsRender创建多条多段线，但是我只显示了一条管线。如果该功能只执行几次，则将显示所有行

我在上查看了其他一些与DirectionsRender的多个路由相关的问题，但是没有人提供正确的解决方案

 <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Directions Complex</title>


<style>
html{height:100%;}
body{height:100%;margin:0px;font-family: Helvetica,Arial;}
</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type ="text/javascript" src="http://www.geocodezip.com/scripts/v3_epoly.js"></script>
<script type="text/javascript">

  var map;
  var directionDisplay;
 var directionsService;
  var stepDisplay;
  //var markerArray = [];
  var position;
  var marker = null;
  var polyline = null;
  var poly = null;




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

  var myPano;   
  var panoClient;
  var nextPanoId;
  var timerHandle = null;

  var startLoc = new Array();
  startLoc[0] = 'rio claro, trinidad';
  startLoc[1] = 'preysal, trinidad';
  startLoc[2] = 'san fernando, trinidad';

  var endLoc = new Array();
  endLoc[0] = 'princes town, trinidad';
  endLoc[1] = 'tabaquite, trinidad';
  endLoc[2] = 'mayaro, trinidad';


  var Colors = ["#FF0000", "#00FF00", "#0000FF"];


function initialize() {  

  infowindow = new google.maps.InfoWindow(
    { 
      size: new google.maps.Size(150,50)
    });

    var myOptions = {
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    address = 'Trinidad and Tobago'
    geocoder = new google.maps.Geocoder();
    geocoder.geocode( { 'address': address}, function(results, status) {
     map.setCenter(results[0].geometry.location);

    }); 
  }  

function setRoutes(){   

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

    var rendererOptions = {
        map: map,
        preserveViewport:true,
        routeIndex:i
    }
    var directionsService = new google.maps.DirectionsService();

    var travelMode = google.maps.DirectionsTravelMode.DRIVING;  

    var request = {
        origin: startLoc[i],
        destination: endLoc[i],
        travelMode: travelMode
    };  
        var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

        directionsDisplay.setMap(map);

        directionsService.route(request, function(result, status) {
        console.log(result);

        if (status == google.maps.DirectionsStatus.OK){

            directionsDisplay.setDirections(result);        
            }
        });
    }       
}


</script>
</head>
<body onload="initialize()">

<div id="tools">

    <button onclick="setRoutes();">Start</button>

</div>

<div id="map_canvas" style="width:100%;height:100%;"></div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-162157-1";
urchinTracker();
</script>
</body>
</html>

基本上，答案与作用域有关，使用回调方法解决了这个问题。同时，我的研究表明，需要为每条路线创建一个DirectionsRenderer。这是通过创建DirectionsRenderer数组并使用回调方法传递索引值来实现的。这样可以绘制相关路线

function setRoutes(){   

    var directionsDisplay = new Array();

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

    var rendererOptions = {
        map: map,
        preserveViewport:true
    }
    directionsService = new google.maps.DirectionsService();

    var travelMode = google.maps.DirectionsTravelMode.DRIVING;  

    var request = {
        origin: startLoc[i],
        destination: endLoc[i],
        travelMode: travelMode
    };  

        directionsService.route(request,makeRouteCallback(directionsDisplay[i]));
    }   


    function makeRouteCallback(disp){
            return function(response, status){
            if (status == google.maps.DirectionsStatus.OK){
                console.log(response);
                disp = new google.maps.DirectionsRenderer(rendererOptions);     
                disp.setMap(map);
                disp.setDirections(response);
            }
        }   
    }

}

有人能告诉我哪里出了问题吗