Javascript 无法读取属性'；文本'；用Google距离矩阵定义的不确定性

下面的代码计算用户给定的两个地址之间的距离

当用户提交表单时，它会起作用，如下所示：

$("#distance_form").submit(function (e) {
  e.preventDefault();
  calculateDistance();
});

但是，我希望代码在不提交表单的情况下运行，因此我使用了以下代码：

  function executeCalculation(){
    calculateDistance();
  }
    // Get all input fields.
  var inputs = document.querySelectorAll('.form-control');

  function checkInputs() {
    var allFilled = true;

    // If any of the inputs is not filled, we won't show the alert.
    for (var i = 0; i < inputs.length; i++) {
      if (inputs[i].value === '') {
        allFilled = false;
      }
    }

    // If all input fields have been filled.
    if (allFilled) {
      executeCalculation();
    }
  }

  // Check all inputs after losing focus on any input.
  for (var i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener('focusout', checkInputs, );
  }

来源：
目的地：

以英里为单位的距离
:
距离为
千克：
文本中的对齐项目中心“id=”工期\文本“>之间的列表组项目d-flex对齐内容：

会议记录：
发件人：
至：

您在收到输入上的

focusout

DOM事件时调用

checkInputs

，这太早了。当地理定位API完成将值解析为实际地址时，应该调用它

事实上，您已经听到了

place\u changed

API事件，因此从那里调用

checkInputs

应该可以完成以下工作：

$（函数（）{
//添加输入侦听器
google.maps.event.addDomListener（窗口，“加载”，函数（）{
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（来自“地点”，地点已更改），函数（）{
var from_place=from_places.getPlace（）；
var from_address=from_place.formatted_address；
$（“#来源”）.val（来自#u地址）；
检查输入（）；
});
google.maps.event.addListener（to_places，“place_changed”，函数（）{
var to_place=to_places.getPlace（）；
var to_address=to_place.formatted_address；
$（“#目的地”）.val（收件人地址）；
检查输入（）；
});
});
//计算距离
函数CalculateInstance（）{
var origin=$（“#origin”）.val（）；
var destination=$（“#destination”）.val（）；
var service=new google.maps.DistanceMatrixService（）；
service.getDistanceMatrix(
{
来源：[来源]，
目的地：[目的地]，
travelMode:google.maps.travelMode.DRIVING，
unitSystem:google.maps.unitSystem.IMPERIAL，//英里和英尺。
//单位制：google.maps.unitSystem.metric，//公里和米。
避免：错误，
避免收费：错误
},
回拨
);
}
//获得距离结果
函数回调（响应、状态）{
if（status！=google.maps.DistanceMatrixStatus.OK）{
$（“#结果”）.html（错误）；
}否则{
var origin=response.originAddresses[0]；
var destination=response.destinationaddress[0]；
if（response.rows[0]。elements[0]。status==“ZERO\u RESULTS”）{
$（“#结果”）.html(
“最好上飞机，中间没有路”+
起源+
“和”+
目的地
);
}否则{
var distance=响应。行[0]。元素[0]。距离；
var duration=response.rows[0]。元素[0]。duration；
var distance_in_kilo=distance.value/1000；//千米
var distance_in_mile=distance.value/1609.34；//英里数
var duration_text=duration.text；
var duration_值=duration.value；
$（“#in#mile”）.text（距离（in#mile.toFixed（2））；
$（“#in_kilo”）.text（距离_in_kilo.toFixed（2））；
$（“#时长(文本））.text（时长(文本)）；
$（“#持续时间_值”）。文本（持续时间_值）；
$（“#from”）。文本（来源）；
$（“#至”）.text（目的地）；
}
}
}
//在提交表单时打印结果
函数执行计算（）{
计算站（）；
}
//获取所有输入字段。
var inputs=document.querySelectorAll（'.formcontrol'）；
函数checkInputs（）{
var-allFilled=true；
//如果任何输入未填充，我们将不会显示警报。
对于（变量i=0；i

来源：
目的地：

以英里为单位的距离
:
距离为
千克：
文本中的对齐项目中心“id=”工期\文本“>之间的列表组项目d-flex对齐内容：

会议记录：
发件人：
至：

调用
CalculateInstance（）
时，
$（“#目的地”）
的值尚未由以下代码段设置：

    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);
    });

解决此问题的一个选项是：


在“place\u changed”代码的回调函数中调用您的
checkInputs
函数
检查
checkInputs
功能中是否填写了
$（“#原点”）
和
$（“#目的地”）
的值
移除底部的“focusout”侦听器
谢谢