2013-08-30 49 views
1

我有一个行车路线的应用程序,让我转由转弯的方向。开始,结束,和航点都来自我的形式,它看起来是这样的:如何在Google Maps API V3中将行车路线路线段与路线名称配对?

<b>Start</b> 
    <select id="startdrop" name="startthere"> 
    ALL MY OPTIONS 
    <option selected value="COMPLETEADDRESS"><%= LOCATIONNAME %></option> 
    </select> 

    Stops Along the Way 
    <select multiple id="waypoints" name="waypointsselected[]"> 
    <option selected value="COMPLETEADDRESS"><%= LOCATIONNAME %></option> 
    </select>   

    <b>End</b> 
    <select id="enddrop" name="endthere"> 
    ALL MY OPTIONS 
    <option selected value="COMPLETEADDRESS"><%= LOCATIONNAME %></option> 
    </select> 

我的目标是让出现在信息窗口的每一个点,在该路由总结LOCATIONNAME。对于从起点到终点的每一点,摘要应该如下所示:

A Great House 
    136 Utica Ave, Brooklyn, NY 11213, USA to 

    Knights Baptist Church 
    180 Utica Ave, Brooklyn, NY 11213 

请参阅下面的我的尝试。现在的问题是:在 “StartText” 是每一个路线相同,航点突破的JavaScript,因为数组是空的:

JAVASCRIPT

function calcRoute() { 
      var start = document.getElementById("startdrop").value; 
      var startSelect = document.getElementById("startdrop"); 
      var startText = startSelect.options[startSelect.selectedIndex].text; 
      var end = document.getElementById("enddrop").value; 
      var endSelect = document.getElementById("enddrop"); 
      var endText = startSelect.options[endSelect.selectedIndex].text; 
       var waypts = []; 
      var waypointText = []; 
      var checkboxArray = document.getElementById("waypoints"); 
      for (var i = 0; i < checkboxArray.length; i++) { 
      waypts.push({ 
        location:checkboxArray[i].value, 
        waypointText:checkboxArray[i].text, 
        stopover:true 
       }); 
     } 

    var request = { 
       origin: start, 
       destination: end, 
       waypoints: waypts, 
       optimizeWaypoints: optimize, 
       travelMode: google.maps.TravelMode.DRIVING 
      }; 
      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 += startText + "</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 />"; 
       summaryPanel.innerHTML += route.legs[i].duration.text + "<br /><br />"; 

编辑1

这里有一些关于重新创建地图的信息,这可能有用(Google Maps V3 - waypoints + infowindow with random text),但如果有不同的更有效的方法,我一定会喜欢听!

回答

0

DirectionsStep对象有一个名为end_location的属性。你可以得到这个值并将其显示在信息窗口中?

https://developers.google.com/maps/documentation/javascript/reference#DirectionsLeg

+0

巴纳,感谢您的答复,但根据相同的文档,创建END_LOCATION代表地理点经纬度对象。我已经在摘要面板中显示end_address。长话短说,这本身不会显示LOCATIONNAME。 – KDP

+0

您可以使用反向地理编码将LatLng转换为地址 - 请参阅此示例:https://developers.google.com/maps/documentation/javascript/examples/geocoding-reverse – Barnaby

+0

Barnaby,我试图列出“A大房子“或”骑士浸信会“作为路线概要的一部分。您上面提到的方法只会显示地址,我已经在路线摘要中找到了。 – KDP