为什么在使用 Google 距离矩阵服务 API 时我的回调函数没有被调用

Question

除了未调用 callback 函数外，以下代码工作正常。显示 callback 函数中的 None 个警报，但同时显示 Start 和 End 警报。我已经检查了控制台和 Google returns 您期望的数据，示例如下。

我的顾虑是；

Google响应前的奇怪代码是什么(/**/_xdc_._6ct5vb && _xdc_._6ct5vb()
包含 Google javascript 文件时 URL 参数 callback=initMap 做什么？

Google 响应：

/**/_xdc_._6ct5vb && _xdc_._6ct5vb( {
   "destination_addresses" : [ "Church Rd, Liverpool L36 9TJ, UK" ],
   "origin_addresses" : [ "Ashfield 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.property-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">&nbsp;</td>
  </tr><tr>
    <td><select id="employee_mileage_employee_id" name="employee_mileage_employee_id" required><option value="28">Alex Roughley</option><option value="31">Asen Sotirov</option><option value="30">Brittany Heyes</option><option value="27">Derek Le Brocq</option><option value="29">Georgina Le Brocq</option><option value="32">Lucy Christian</option><option value="1" selected>Michael Le Brocq</option><option value="26">Michelle Le Brocq</option></select></td>
    <td><select id="employee_mileage_vehicle_id" name="employee_mileage_vehicle_id" required><option value="2" selected>F1 MLB - Audi A5</option><option value="1">Lucy TBC - Ford Focus</option><option value="3">MT63 JRX - Audi Q7</option></select></td><td><input type="text" id="employee_mileage_start_postcode" name="employee_mileage_start_postcode" maxlength="8" style="width:85px;" value="L17 0BZ" required></td><td><input type="text" id="employee_mileage_end_postcode" name="employee_mileage_end_postcode" maxlength="8" style="width:85px;" value="L36 9TJ" 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">&nbsp;<input type="submit" value="Save"></td></tr></table></td></tr></table>

</fieldset></form></div>

Answer 1

以下代码对我有用。注意没有 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>

为什么在使用 Google 距离矩阵服务 API 时我的回调函数没有被调用

Why isn't my callback function being evoked when using the Google Distance Matrix Service API

javascript

jquery

google-maps

google-distancematrix-api