Question

我编辑了这段代码但是在距离文本框中我要显示总距离。怎么办？它计算了2个航点之间的距离。我试图添加所有的数据，但它不起作用。

 <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>

Answer 1

您可能想在您的路线请求中使用“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

具有动态和多个目的地的Google地图

1 个答案: