Question

直到现在......我一直在方向服务对象内传递源和目标值，该对象将在源和目标之间绘制路径。但是这里我收到一个纬度和经度数组，我需要将它传递到方向服务对象。

例如：我有四个地方，如纽约，华盛顿，曼哈顿，加利福尼亚。所以我应该可以画一条从纽约到的路线加利福尼亚州从华盛顿和曼哈顿经过的路线只有两个标记。纽约的标记和B标记加利福尼亚。

我尝试使用方式点。但在我的例子中，它使用的是地名，而不是纬度和经度。更重要的是，它为每个访问过的地方创建了标记。

我的要求是在数组中传递纬度和经度并绘制路线使用directionservice。

请找到以下代码。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Chart</title>
<style>
html,body,#map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
}

#panel {
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: -180px;
    z-index: 5;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>



<script> 

var directionsDisplay; var directionsService = new google.maps.DirectionsService(); 
var map;  
function initialize() 
{   
    directionsDisplay = new google.maps.DirectionsRenderer();   
    var delhi = new google.maps.LatLng(28.6168, 77.2434);  
     var mapOptions = 
         {     
             zoom: 6,     
             mapTypeId: google.maps.MapTypeId.ROADMAP,     
             center: delhi   
         }  
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);   

      directionsDisplay.setMap(map); 
      }  




function calcRoute() {  
      var start = document.getElementById('start').value;   
      var end = document.getElementById('end').value;  
       var waypts = [];   
       var checkboxArray = document.getElementById('waypoints');   
       for (var i = 0; i < checkboxArray.length; i++) 
           {     if (checkboxArray.options[i].selected == true) 
               {       
               waypts.push({           
               location:checkboxArray[i].value,           
               stopover:true});     
               }   
           }    
       var request = 
           {       
               origin: start,       
               destination: end,       
               waypoints: waypts,  
               provideRouteAlternatives:true,
             //  alternatives:true,     
               optimizeWaypoints: true,       
               travelMode: google.maps.TravelMode.DRIVING   
            };   

       var polylineOptions = new google.maps.Polyline({
            strokeColor: '#000000',
            strokeOpacity: 1.0,
            strokeWeight: 2
        });






        directionsService.route(request, function(response, status) 
                {     
                    if (status == google.maps.DirectionsStatus.OK) 
                        {       
                            directionsDisplay.setDirections(response);       
                            var route = response.routes[0];      
                            var summaryPanel = document.getElementById('directions_panel');       
                            summaryPanel.innerHTML = '';       // For each route, display summary information.      
                            for (var i = 0; i < route.legs.length; i++) 
                            {        
                                var routeSegment = i + 1;        
                                summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment + '</b><br>';        
                                summaryPanel.innerHTML += route.legs[i].start_address + ' to ';        
                                summaryPanel.innerHTML += route.legs[i].end_address + '<br>';         
                                summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';      
                            }     
}   }); 
}  


google.maps.event.addDomListener(window, 'load', initialize);      </script>
</head>
<body>
<div id="map-canvas" style="float: left; width: 70%; height: 100%;"></div>
<div id="control_panel"
    style="float: right; width: 30%; text-align: left; padding-top: 20px">
<div style="margin: 20px; border-width: 2px;"><b>Loco Journey Start Station:</b> <select
    id="start">
    <option value="Tughlakabad">Tughlakabad</option>
    <option value="Lucknow">Lucknow</option>
    <option value="Firozpur">Firozpur</option>
    <option value="Ghaziabad">Ghaziabad</option>
</select> <br>
<b>Journey:</b> <br>
<i>(Ctrl-Click for multiple selection)</i> <br>
<select multiple id="waypoints">
    <option value="Bhopal">Bhopal</input>
    <option value="Raipur">Raipur</input>
    <option value="Farukkhabad">Farukkhabad</input>
    <option value="Jhansi">Jhansi</input>
</select> <br>
<b>Loco Journey End Station:</b> <select id="end">
    <option value="Lucknow">Lucknow</option>
    <option value="Firozpur">Firozpur</option>
    <option value="Ghaziabad">Ghaziabad</option>
    <option value="Tughlakabad">Tughlakabad</option>
</select> <br>
<input type="submit" onclick="calcRoute();"></div>
<div id="directions_panel"
    style="margin: 20px; background-color: #FFEE77;"></div>
</div>
</body>
</html>

Answer 1

DirectionsRequest：

采用字符串（对于地址）或google.maps.LatLng object (for coordinates)。

origin      | LatLng|string | Location of origin. This can be specified as either a string to be geocoded or a LatLng. Required.
destination | LatLng|string | Location of destination. This can be specified as either a string to be geocoded or a LatLng. Required.

Waypoints采用布尔“中途停留”标志，确定他们获取标记的位置。将其设置为false。它还可以在位置属性中使用字符串（用于地址）或google.maps.LatLng object (for coordinates)。

stopover | boolean | If true, indicates that this waypoint is a stop between the origin and destination. This has the effect of splitting the route into two. This value is true by default. Optional.

如何在方向服务对象中传递一系列纬度和经度？

1 个答案: