Javascript 未捕获的InvalidValueError:在索引0处的属性起源中：不是字符串，也不是LatLng或LatLngLiteral:不是对象_Javascript_Google Maps

Javascript 未捕获的InvalidValueError:在索引0处的属性起源中：不是字符串，也不是LatLng或LatLngLiteral:不是对象

javascript google-maps

Javascript 未捕获的InvalidValueError:在索引0处的属性起源中：不是字符串，也不是LatLng或LatLngLiteral:不是对象,javascript,google-maps,Javascript,Google Maps,我正在编写一个基本的JavaScript程序，用于查找两个邮政编码之间的距离。代码如下： index.html <!DOCTYPE HTML> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="map

我正在编写一个基本的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>

每当我运行此命令时，Chrome控制台窗口中就会出现以下错误：

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

我决不是JavaScript专家，但在我看来，输入框已经是文本类型，因此存在一个字符串元素，尽管在运行时初始值将为零

如有任何改进建议或提示，将不胜感激

非常感谢

在访问DOM之前，需要等待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>


var service=new google.maps.DistanceMatrixService（）；
函数CalculateInstance（）{
var origin=document.getElementById（“orig”）.value；
var destination=document.getElementById（“dest”）.value；
service.getDistanceMatrix(
{
来源：[来源]，
目的地：[目的地]，
travelMode:google.maps.travelMode.DRIVING，
避免：错误，
避免：错误，
unitSystem:google.maps.unitSystem.IMPERIAL
}, 
回拨
);
}
函数回调（响应、状态）{
var orig=document.getElementById（“orig”），
dest=document.getElementById（“dest”），
dist=document.getElementById（“dist”）；
如果（状态=“正常”）{
orig.value=response.originAddresses[0]；
dest.value=response.destinationAddresses[0]；
dist.value=response.rows[0].元素[0].距离.text；
}否则{
警报（“错误：+状态”）；
}
}
google.maps.event.addDomListener（窗口，“加载”，CalculateInstance）；
加尔各答
邮政编码1
邮政编码2
“WC1X 9NT”
保持距离！

我认为输入元素是Htmlements类型的对象。它们不是你正在思考的文本。我想你能做到像。。获取字符串的origin.value。嗨，geocodezip，非常感谢您的帮助。这个程序运行得很好。我忘了这里的基本知识了！我会记住你的解释，以便将来编码。

<!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>