为什么不是'当使用Google Distance Matrix Service API时,不会调用我的回调函数
Why isn't my callback function being evoked when using the Google Distance Matrix Service API
除了callback
函数未被调用外,以下代码工作正常。callback
功能中没有显示任何警报,但同时显示Start
和End
警报。我已经检查了控制台,谷歌会返回你期望的数据,下面的例子。
我担心的是;
-
谷歌回应(
/**/_xdc_._6ct5vb && _xdc_._6ct5vb(
)之前的奇怪代码是什么 -
当包含Google javascript文件时,URL参数
callback=initMap
的作用是什么?
谷歌回应:
/**/_xdc_._6ct5vb && _xdc_._6ct5vb( {
"destination_addresses" : [ "Church Street, Liverpool L36 9TJ, UK" ],
"origin_addresses" : [ "Ashmount Rd, Liverpool L17 0BZ, UK" ],
"rows" : [
{
"elements" : [
{
"distance" : {
"text" : "5.1 mi",
"value" : 8175
},
"duration" : {
"text" : "16 mins",
"value" : 959
},
"status" : "OK"
}
]
}
],
"status" : "OK"
}
)
Javascript/jQuery:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=<?php echo GOOGLE_MAPS_API_KEY; ?>&callback=initMap" type="text/javascript"></script><!-- Google Maps -->
<script>
$( document ).ready(function() {
// validate form
$( "#add_employee_mileage" ).validate({
errorClass: "error-class"
});
$( "#calculateMileage" ).click(function() {
alert('Start');
var origin = $( "#employee_mileage_start_postcode" ).val();
var destination = $( "#employee_mileage_end_postcode" ).val();
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix(
{
origins: [origin],
destinations: [destination],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.IMPERIAL,
avoidHighways: false,
avoidTolls: false
},
callback
);
function callback(response, status) {
alert('Callback');
if(status=="OK") {
alert('Ok');
alert(response.rows[0].elements[0].distance.value);
$( "#employee_mileage_mileage" ).val(response.rows[0].elements[0].distance.value);
} else {
alert("Error: " + status);
}
}
alert('End');
});
});
</script>
HTML:
<form id="add_employee_mileage" name="add_employee_mileage" action="https://www.system-uk.com/admin-area/ajax/add_employee_mileage.php" method="post"><fieldset>
<legend>Mileage Details</legend>
<table class="nobord"><tr><td><table class="nobord"><tr>
<td class="bold">Employee</td>
<td class="bold">Vehicle</td>
<td class="bold">Start Postcode</td>
<td class="bold">End Postcode</td>
<td class="bold">Mileage</td>
<td class="bold"> </td>
</tr><tr>
<td><select id="employee_mileage_employee_id" name="employee_mileage_employee_id" required></select></td>
<td><select id="employee_mileage_vehicle_id" name="employee_mileage_vehicle_id" required></select></td><td><input type="text" id="employee_mileage_start_postcode" name="employee_mileage_start_postcode" maxlength="8" style="width:85px;" value="L17" required></td><td><input type="text" id="employee_mileage_end_postcode" name="employee_mileage_end_postcode" maxlength="8" style="width:85px;" value="L3" required></td><td><input type="number" id="employee_mileage_mileage" name="employee_mileage_mileage" min="0" step="any" required></td><td><input type="button" id="calculateMileage" value="Calculate Mileage"> <input type="submit" value="Save"></td></tr></table></td></tr></table>
</fieldset></form></div>
以下代码对我有效。请注意,没有callback
函数
<script>
$( document ).ready(function() {
// validate form
$( "#add_employee_mileage" ).validate({
errorClass: "error-class"
});
$( "#calculateMileage" ).click(function() {
var origin_postcode = $( "#employee_mileage_start_postcode" ).val();
var destination_postcode = $( "#employee_mileage_end_postcode" ).val();
var distanceService = new google.maps.DistanceMatrixService();
distanceService.getDistanceMatrix({
origins: [origin_postcode],
destinations: [destination_postcode],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.IMPERIAL,
avoidHighways: false,
avoidTolls: false
},
function (response, status) {
if (status !== google.maps.DistanceMatrixStatus.OK) {
alert('Error: ', status);
} else {
$( "#employee_mileage_mileage" ).val((response.rows[0].elements[0].distance.value * 0.000621371).toFixed(2));
}
});
});
});
</script>
相关文章:
- 如何在 API 调用后和 if 语句中启用提交按钮
- NodeJS API调用中Array中的Push和Pull元素
- 在Chrome扩展内部输出Google API调用
- IE11中的第二个调用取消了第一个Fetch API调用
- RxjsObservable:通过一个API调用订阅不同的值
- 通过API调用过滤数据
- 给出<选项>标记一个类?API调用不工作
- 使用Angular获取数据API调用时出错
- javascript API调用导致旧数据
- 在一个服务中引用多个API调用(Angular)
- 背景:'userId'在SignUp API调用后为null
- 对/Token的ASP Web API调用间歇性
- Web API 调用在设备模式下失败
- 将使用 $.ajax() 和 JSONP 的 API 调用替换为服务器到服务器的 API 调用
- 如何将 JavaScript Yahoo Weather API 调用属性替换为变量
- 谷歌日历 api 调用可以在角度工厂内返回承诺吗?
- 仅显示 Google 表格中来自 api 调用的最新数据行
- 我的 API 调用没有返回任何内容
- 如何通过声云 api 调用获取用户 ID
- 在 api 调用$resource显示错误和成功消息