早上好，
我有以下问题。
我正试图从谷歌地图设置距离计算器。
Google正在以这种格式使用自己的api：
https://maps.googleapis.com/maps/api/distancematrix/output?parameters
输出可以是json或xml。
我们的想法是使用纬度和经度对网址进行编码：
这是api如何提供输出的一个例子。
现在，我希望能够从我所拥有的纬度和经度列表中生成网址。
这两个字段都是自动完成的下拉列表（datalist函数似乎对此有用）
一旦我点击像计算距离这样的按钮，它就会从我选择的2个输入中生成网址并运行它，以便为我提供输出。
输出将在json中，所以我们也应该找到一种方法让它在html中解释。
我真的很感激你的一些帮助。
谢谢
答案 0 :(得分：0)
https://maps.googleapis.com/maps/api/distancematrix/output?parameters
不支持JSONP您可能希望将Distance Matrix Service用作Google Maps Javascript API的一部分。
示例
function calc() {
var originVals = $('#origins').val();
var destVals = $('#destinations').val();
var modeVal = $('#modes').val();
calculateDistances(originVals, destVals, modeVal,printInfo);
}
function printInfo(response, status) {
if (status != google.maps.DistanceMatrixStatus.OK) {
console.log('An error occured: ' + status);
return;
}
var output = JSON.stringify(response, null, 2);
$("#output").text(output);
}
function calculateDistances(originVals, destVals, mode, callback) {
var origins = [];
originVals.forEach(function (val) {
var ll = val.split(',');
origins.push(new google.maps.LatLng(ll[0], ll[1]));
});
var destinations = [];
destVals.forEach(function (val) {
var ll = val.split(',');
destinations.push(new google.maps.LatLng(ll[0], ll[1]));
});
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix(
{
origins: origins,
destinations: destinations,
travelMode: mode.toUpperCase()
}, callback);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<body>
<table>
<tr>
<td colspan="2">
<label for="modes">Travel Modes</label>
<select id="modes">
<option value="driving">Driving</option>
<option value="walking">Walking</option>
<option value="bicycling">Bicycling</option>
<option value="transit">Transit</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="origins">Origins</label>
</td>
<td>
<label for="destinations">Destinations</label>
</td>
</tr>
<tr>
<td>
<select id="origins" multiple="multiple">
<option value="49.256149, -123.074132">Vancouver+BC</option>
<option value="47.608136, -122.309813">Seattle</option>
</select>
</td>
<td>
<select id="destinations" multiple="multiple">
<option value="37.749624, -122.442407">San+Francisco</option>
<option value="48.430068, -123.365541">Victoria+BC</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<input value="Calculate" type="button" onclick="calc();" />
</td>
</tr>
</table>
<br/>
<span>Result:</span>
<pre style="background-color: #c0c0c0" id="output"></pre>
</body>