javascript 未捕获的 InvalidValueError：在属性起源中：在索引 0：不是字符串，也不是 LatLng 或 LatLngLiteral：不是对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20448605/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught InvalidValueError: in property origins: at index 0: not a string, and not a LatLng or LatLngLiteral: not an Object
提问by user2280642
I am writing a basic JavaScript program which finds the distance between two postcodes. The code is below:
我正在编写一个基本的 JavaScript 程序，它可以找到两个邮政编码之间的距离。代码如下：
index.html
索引.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
地图.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);
}
}
Whenever I run this I get the following error in the Chrome console window:
每当我运行它时，我都会在 Chrome 控制台窗口中收到以下错误：
Uncaught InvalidValueError: in property origins: at index 0: not a string, and not a LatLng or LatLngLiteral: not an Object
未捕获的 InvalidValueError：在属性起源中：在索引 0：不是字符串，也不是 LatLng 或 LatLngLiteral：不是对象
I am by no means a JavaScript expert but in my mind the input boxes are already of type text so there is a string element present although at runtime the initial values will be nothing.
我绝不是 JavaScript 专家，但在我看来，输入框已经是文本类型，因此存在一个字符串元素，尽管在运行时初始值将为零。
Any suggestions or tips on improving would be greatly appreciated.
任何关于改进的建议或提示将不胜感激。
many thanks.
非常感谢。
采纳答案by geocodezip
- You need to wait until the DOM has rendered before accessing it
- You can't just call the callback to the DirectionsMatrix, you need to send the request with the updated data
if you want the text value of a input element you need to get .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>
- 您需要等到 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>
