Question

我该怎么做才能让我的谷歌地图只显示这两个点之间的持续时间和距离，而不是地图和导航点。

是否可以进一步使用这些输出来计算基于距离的价格？即。每公里10公里距离x16等于160 .-？

<table border="0" cellpadding="0" cellspacing="3">
<tr>
    <td colspan="2">
        Henteadresse:
        <input type="text" id="txtSource" value="" style="width: 200px" />
        &nbsp; Leveringsadresse:
        <input type="text" id="txtDestination" value="" style="width: 200px" />
        <br />
        <input type="button" value="Finn kjørerute" onclick="GetRoute()" />
        <hr />
    </td>
</tr>
<tr>
    <td colspan="2">
        <div id="dvDistance">
        </div>
    <td>
        <div id="dvMap" style="width: 500px; height: 500px">
        </div>
    </td>
    </td>
</tr>
<tr>

    <td>
        <div id="dvPanel" style="width: 500px; height: 500px">
        </div>
    </td>
</tr>
</table>


<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
var source, destination;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
google.maps.event.addDomListener(window, 'load', function () {
    new google.maps.places.SearchBox(document.getElementById('txtSource'));
    new google.maps.places.SearchBox(document.getElementById('txtDestination'));
    directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });
});

function GetRoute() {
    var mumbai = new google.maps.LatLng(18.9750, 72.8258);
    var mapOptions = {
        zoom: 7,
        center: mumbai
    };
    map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('dvPanel'));

  //*********DIRECTIONS AND ROUTE**********************//
    source = document.getElementById("txtSource").value;
    destination = document.getElementById("txtDestination").value;

    var request = {
        origin: source,
        destination: destination,
        travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });

    //*********DISTANCE AND DURATION**********************//
    var service = new google.maps.DistanceMatrixService();
    service.getDistanceMatrix({
        origins: [source],
        destinations: [destination],
        travelMode: google.maps.TravelMode.DRIVING,
        unitSystem: google.maps.UnitSystem.METRIC,
        avoidHighways: false,
        avoidTolls: false
    }, function (response, status) {
        if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
            var distance = response.rows[0].elements[0].distance.text;
            var duration = response.rows[0].elements[0].duration.text;
            var dvDistance = document.getElementById("dvDistance");
           dvDistance.innerHTML = "";
            dvDistance.innerHTML += "Distance: " + distance + "<br />";
            dvDistance.innerHTML += "Duration:" + duration;

        } else {
            alert("Unable to find the distance via road.");
        }
    });
}

</script>

Answer 1

如果您只需要距离和持续时间，而不是地图上的路线，则可以使用DirectionsMatrix

要在计算中使用返回的数据，请在回调函数中使用它。

var distance = results[j].distance.text;
var duration = results[j].duration.text;
var dvDistance = document.getElementById("dvDistance");
dvDistance.innerHTML = "";
dvDistance.innerHTML += "Distance: " + distance + "<br />";
// 16 dollars / km
dvDistance.innerHTML += "Cost: $" + (results[j].distance.value/1000 * 16).toFixed(2) + "<br />"; 
dvDistance.innerHTML += "Duration: " + duration;

proof of concept fiddle

代码段

var source, destination;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
google.maps.event.addDomListener(window, 'load', function() {
  new google.maps.places.SearchBox(document.getElementById('txtSource'));
  new google.maps.places.SearchBox(document.getElementById('txtDestination'));
  directionsDisplay = new google.maps.DirectionsRenderer({
    'draggable': true
  });
});

function calculateDistances() {
  var service = new google.maps.DistanceMatrixService();
  source = document.getElementById("txtSource").value;
  destination = document.getElementById("txtDestination").value;

  service.getDistanceMatrix({
    origins: [source],
    destinations: [destination],
    travelMode: google.maps.TravelMode.DRIVING,
    unitSystem: google.maps.UnitSystem.METRIC,
    avoidHighways: false,
    avoidTolls: false
  }, callback);
}

function callback(response, status) {
  if (status != google.maps.DistanceMatrixStatus.OK) {
    alert('Error was: ' + status);
  } else {
    var origins = response.originAddresses;
    var destinations = response.destinationAddresses;
    var outputDiv = document.getElementById('dvDistance');
    outputDiv.innerHTML = '';

    for (var i = 0; i < origins.length; i++) {
      var results = response.rows[i].elements;
      for (var j = 0; j < results.length; j++) {

        var distance = results[j].distance.text;
        var duration = results[j].duration.text;
        var dvDistance = document.getElementById("dvDistance");
        dvDistance.innerHTML = "";
        dvDistance.innerHTML += "Distance: " + distance + "<br />";
        // 16 dollars / km
        dvDistance.innerHTML += "Cost: $" + (results[j].distance.value / 1000 * 16).toFixed(2) + "<br />";
        dvDistance.innerHTML += "Duration: " + duration;
      }
    }
  }
}

html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<table border="0" cellpadding="0" cellspacing="3">
  <tr>
    <td colspan="2">
      Henteadresse:
      <input type="text" id="txtSource" value="" style="width: 200px" />&nbsp; Leveringsadresse:
      <input type="text" id="txtDestination" value="" style="width: 200px" />
      <br />
      <input type="button" value="Finn kjørerute" onclick="calculateDistances()" />
      <hr />
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <div id="dvDistance">
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div id="dvPanel" style="width: 500px; height: 500px">
      </div>
    </td>
  </tr>
</table>

v3只显示距离而不是地图

1 个答案: