帶有動態和多個目的地的Google地圖

-1

我已編輯此代碼，但在距離文本框中我想顯示總距離。如何操作？它計算2個航點之間的距離。我試圖增加所有的航程，但它不起作用。帶有動態和多個目的地的Google地圖

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 
    var directionDisplay; 
    var map; 
    function initialize() { 
     directionsDisplay = new google.maps.DirectionsRenderer(); 
     var melbourne = new google.maps.LatLng(-37.813187, 144.96298); 
     var myOptions = { 
     zoom:12, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: melbourne 
     } 
     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
     directionsDisplay.setMap(map); 
    } 
    var directionsService = new google.maps.DirectionsService(); 

    function calcRoute() { 
     var start = document.getElementById("im1").value; 
     var end = document.getElementById("im2").value; 

     var im1 = document.getElementById("start").value; 
     var im2 = document.getElementById("end").value; 

     var waypoints = [{ 
       location:im1, 
       stopover:true 
      },{ 
       location:im2, 
       stopover:true 
      }]; 

     var distanceInput = document.getElementById("distance"); 
      var request = { 
      origin:start, 
      destination:end, 
      waypoints: waypoints, 
      optimizeWaypoints: true, 
      travelMode: google.maps.DirectionsTravelMode.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++) { 
        svar 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>'; 
       } 
      } 
     }); 
    } 
</script> 
<body onload="initialize()"> 
    <div> 
     <p> 
      <label for="start">Start: </label> 
      <input type="text" name="start" id="start" /> 
      <label for="end">End: </label> 
      <input type="text" name="end" id="end" /> 
      <label for="start">Intermediate Point 1: </label> 
      <input type="text" name="im1" id="im1" /> 
      <label for="end">Intermediate Point 2: </label> 
      <input type="text" name="im2" id="im2" /> 
      <input type="submit" value="Calculate Route" onclick="calcRoute()" /> 
     </p> 
     <p> 
      <label for="distance">Distance (km): </label> 
      <input type="text" name="distance" id="distance" readonly="true" /> 
      <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div> 
     </p> 
    </div> 
    <div id="map_canvas"></div> 
</body>

來源

2013-05-17 Avnee.Angel

你試過了什麼？我假設你想要在單一路線上的所有點，您是否閱讀了[Waypoint上的文檔]（https://developers.google.com/maps/documentation/javascript/directions#Waypoints）？ – geocodezip

我試過，但它不顯示map.only顯示距離 –

試過什麼？使用航點的文檔語法？ – geocodezip

你可能婉使用你的方向「IM1」和「IM2」要求：

var im1 = document.getElementById("im1").value; 
var im2 = document.getElementById("im2").value;

不是：

var im1 = document.getElementById("start").value; 
var im2 = document.getElementById("end").value;

然後：

var waypoints = [{ 
     location:im1, 
     stopover:true 
    },{ 
     location:im2, 
     stopover:true 
    }]; 
var request = { 
    origin:start, 
    destination:end, 
    waypoints: waypoints, 
    travelMode: google.maps.DirectionsTravelMode.DRIVING 
};

Example

來源

2013-05-17 13:25:55 geocodezip

帶有動態和多個目的地的Google地圖

回答

相關問題