Question

我正在编写一个基本的JavaScript程序，用于查找两个邮政编码之间的距离。代码如下：

的index.html

    <!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="maps.css">
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <script src="maps.js" type="text/javascript"></script>
        <title>CalcuTrip</title>
    </head>
    <body>
        <label>Postcode 1</label>
        <input id="orig" type="text">
        <label>Postcode 2</label>
        <input id="dest" type="text">
        <label>Get Distance!</label>
        <input type="button" value="Calculate Distance" onclick="callback()">
        <input id="dist" type="text">
    </body>
</html>

maps.js

var origin = document.getElementById("orig"),
    destination = document.getElementById("dest"),
    service = new google.maps.DistanceMatrixService();

service.getDistanceMatrix(
    {
        origins: [origin],
        destinations: [destination],
        travelMode: google.maps.TravelMode.DRIVING,
        avoidHighways: false,
        avoidTolls: false,
        unitSystem: google.maps.UnitSystem.IMPERIAL
    }, 
    callback
);

function callback(response, status) {
    var orig = document.getElementById("orig"),
        dest = document.getElementById("dest"),
        dist = document.getElementById("dist");

    if(status=="OK") {
        orig.value = response.originAddresses[0];
        dest.value = response.destinationAddresses[0];
        dist.value = response.rows[0].elements[0].distance.text;
    } else {
        alert("Error: " + status);
    }
}

每当我运行此操作时，我在Chrome控制台窗口中收到以下错误：

Uncaught InvalidValueError：在属性origin中：在索引0处：不是a 字符串，而不是LatLng或LatLngLiteral：不是对象

我绝不是JavaScript专家，但在我看来，输入框已经是文本类型，因此存在一个字符串元素，尽管在运行时初始值将没有任何内容。

非常感谢任何有关改进的建议或提示。

非常感谢。

Answer 1

您需要等到DOM呈现之后才能访问它
你不能只调用DirectionsMatrix的回调，你需要发送带有更新数据的请求

如果您需要输入元素的文本值，则需要获取.value

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<script type="text/javascript">
var service = new google.maps.DistanceMatrixService();

function calculateDistance(){
  var origin = document.getElementById("orig").value;
  var destination = document.getElementById("dest").value;
  service.getDistanceMatrix(
    {
        origins: [origin],
        destinations: [destination],
        travelMode: google.maps.TravelMode.DRIVING,
        avoidHighways: false,
        avoidTolls: false,
        unitSystem: google.maps.UnitSystem.IMPERIAL
    }, 
    callback
  );
}
function callback(response, status) {
  var orig = document.getElementById("orig"),
      dest = document.getElementById("dest"),
      dist = document.getElementById("dist");

  if(status=="OK") {
      orig.value = response.originAddresses[0];
      dest.value = response.destinationAddresses[0];
      dist.value = response.rows[0].elements[0].distance.text;
  } else {
      alert("Error: " + status);
  }
}
google.maps.event.addDomListener(window,"load", calculateDistance);
</script>
        <title>CalcuTrip</title>
    </head>
    <body>
        <label>Postcode 1</label>
        <input id="orig" type="text" value="KA12 6QE">
        <label>Postcode 2</label>
        <input id="dest" type="text" value="SW1A 0AA"> "WC1X 9NT"
        <label>Get Distance!</label>
        <input type="button" value="Calculate Distance" onclick="calculateDistance()">
        <input id="dist" type="text">
    </body>
</html>

未捕获的InvalidValueError：在属性origin中：在索引0处：不是字符串，而不是LatLng或LatLngLiteral：不是对象

1 个答案: