gpt4 book ai didi

javascript - 未捕获 InvalidValueError : in property origins: at index 0: not a string, 而不是 LatLng 或 LatLngLiteral:不是对象

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:33:48 26 4
gpt4 key购买 nike

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

map .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: in property origins: at index 0: not a string, and not a LatLng or LatLngLiteral: not an Object

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

如有任何改进建议或提示,我们将不胜感激。

非常感谢。

最佳答案

  1. 您需要等到 DOM 呈现后再访问它
  2. 您不能只调用 DirectionsMatrix 的回调,您需要发送包含更新数据的请求
  3. 如果您想要输入元素的文本值,您需要获取 .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>

关于javascript - 未捕获 InvalidValueError : in property origins: at index 0: not a string, 而不是 LatLng 或 LatLngLiteral:不是对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20448605/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com