Карты Google Добавление нескольких полилиний

-4

Я пытаюсь создать несколько полилиний, используя google.Maps.DirectionsRender(), однако я получаю только один отображаемый маршрут. Если функция будет выполняться несколько раз, тогда будут отображаться все графические строки.Карты Google Добавление нескольких полилиний

Я рассмотрел другие вопросы, касающиеся 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

Карты Google Добавление нескольких полилиний

ответ

Смежные вопросы