谷歌地图添加多条多段线

Google Maps Adding Multiple Polylines

本文关键字：段线谷歌地图添加更新时间：2023-09-26

我正试图使用谷歌创建多条多段线。Maps.DirectionsRender（）但是我只显示了一条路线。如果该函数只执行了几次，那么将显示所有的ployline。

我查看了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>

基本上，答案与作用域有关，回调方法的使用解决了这个问题。此外，我的研究表明，需要为每条路线创建一个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);
            }
        }   
    }
}