谷歌地圖添加多條多段線

-4

我正在嘗試使用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>

來源

2013-07-25 devdar

有人可以指導我，我到哪裏去錯了 – devdar

基本上答案曾與範圍有關，並使用電話的背面方法解決了這個problem.Also作爲我的研究顯示需要爲每個路由要創建一個的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); 
      } 
     } 
    } 

}

來源

2013-08-06 02:08:52 devdar

谷歌地圖添加多條多段線

回答

相關問題