Question

我正在尝试使用google.Maps.DirectionsRender（）创建多条折线但是我只会显示一条路线。如果他的功能被执行了几次，那么将显示所有的ploylines。

我看了一些关于SO的一些问题，这些问题与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>

Answer 1

基本上答案与范围界定有关，回调方法的使用解决了这个问题。同时我的研究显示需要为每条路线创建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);
            }
        }   
    }

}

Google地图添加多条折线

1 个答案: