我有简单的脚本来计算两个地方之间的距离。我有2个自动完成输入。它的工作方式与我想要的一样，但我需要再添加一件东西。所以，让我们说我有点B和C.我的脚本将计算它们之间的路线，但我想添加另一个静态点A（我知道它的坐标）。所以，我需要计算A和B之间的距离，然后计算B和C之间的距离并添加结果。简单的例子
A -> B = distance 20km
B -> C = distance 130km
total = 150
以下是我的代码。
$(function() {
// add input listeners
google.maps.event.addDomListener(window, 'load', function() {
var from_places = new google.maps.places.Autocomplete(document.getElementById('from_places'));
var to_places = new google.maps.places.Autocomplete(document.getElementById('to_places'));
google.maps.event.addListener(from_places, 'place_changed', function() {
var from_place = from_places.getPlace();
var from_address = from_place.formatted_address;
$('#origin').val(from_address);
});
google.maps.event.addListener(to_places, 'place_changed', function() {
var to_place = to_places.getPlace();
var to_address = to_place.formatted_address;
$('#destination').val(to_address);
});
});
// calculate distance
function calculateDistance() {
var origin = $('#origin').val();
var destination = $('#destination').val();
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix({
origins: [origin],
destinations: [destination],
travelMode: google.maps.TravelMode.DRIVING,
// unitSystem: google.maps.UnitSystem.IMPERIAL, // miles and feet.
unitSystem: google.maps.UnitSystem.metric, // kilometers and meters.
avoidHighways: false,
avoidTolls: false
}, callback);
}
// get distance results
function callback(response, status) {
if (status != google.maps.DistanceMatrixStatus.OK) {
$('#result').html(err);
} else {
var origin = response.originAddresses[0];
var destination = response.destinationAddresses[0];
if (response.rows[0].elements[0].status === "ZERO_RESULTS") {
$('#result').html("Better get on a plane. There are no roads between " + origin + " and " + destination);
} else {
var distance = response.rows[0].elements[0].distance;
var duration = response.rows[0].elements[0].duration;
console.log(response.rows[0].elements[0].distance);
var distance_in_kilo = distance.value / 1000; // the kilom
var distance_in_mile = distance.value / 1609.34; // the mile
var duration_text = duration.text;
var duration_value = duration.value;
var total_cost = distance_in_kilo * 3.44;
// $('#in_mile').text(distance_in_mile.toFixed(2));
$('#in_kilo').text(distance_in_kilo.toFixed(2) + ' km');
// $('#duration_text').text(duration_text);
// $('#duration_value').text(duration_value);
$('#from').text(origin);
$('#to').text(destination);
$('#cost').text(total_cost.toFixed(2) + ' zł');
}
}
}
// print results on submit the form
$('#distance_form').submit(function(e) {
e.preventDefault();
calculateDistance();
});
});<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script defer src="https://maps.googleapis.com/maps/api/js?libraries=places&language=pl" type="text/javascript"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<form id="distance_form">
<div class="form-group">
<label>Origin: </label>
<input id="from_places" class="form-control" placeholder="Enter a location" />
<input id="origin" type="hidden" name="origin" required/>
</div>
<div class="form-group">
<label>Destination: </label>
<input id="to_places" class="form-control" placeholder="Enter a location" />
<input id="destination" type="hidden" name="destination" required/>
</div>
<input type="submit" value="Calculate" class="btn btn-primary" />
</form>
</div>
<div class="col-md-6">
<div id="result">
<ul class="list-group">
<!-- <li class="list-group-item d-flex justify-content-between align-items-center">
Distance In Mile :
<span id="in_mile" class="badge badge-primary badge-pill"></span>
</li> -->
<li class="list-group-item d-flex justify-content-between align-items-center">
Distance is Kilo:
<span id='in_kilo' class="badge badge-primary badge-pill"></span>
</li>
<!-- <li class="list-group-item d-flex justify-content-between align-items-center">
IN TEXT:
<span id="duration_text" class="badge badge-primary badge-pill"></span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
IN MINUTES:
<span id="duration_value" class="badge badge-primary badge-pill"></span>
</li> -->
<li class="list-group-item d-flex justify-content-between align-items-center">
FROM:
<span id="from" class="badge badge-primary badge-pill"></span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
TO:
<span id="to" class="badge badge-primary badge-pill"></span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
COST:
<span id="cost" class="badge badge-primary badge-pill"></span>
</li>
</ul>
</div>
</div>
</div>
</div>
答案 0 :(得分：1)
将两个源都放在原始数组中，将两个目标放在目标数组中。
service.getDistanceMatrix(
{
origins: [A, B],
destinations: [B, C],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.metric, // kilometers and meters.
avoidHighways: false,
avoidTolls: false
}, callback);