距离矩阵api - 如何按用户设置目的地?

时间:2016-09-09 08:49:29

标签: javascript html html5 function google-maps

我使用了这段代码(这是用于计算两个城市之间距离的代码):

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

</head>
<body>

<input id="orig" type="text" style="width:35em"><br><br>
Vaša lokacija: <input id="dest" type="text" style="width:35em"><br><br>
Udaljenost: <input id="dist" type="text" style="width:35em">
<button onclick="" >Izračunaj!</button>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var origin = "Zagreb",
destination = "Cakovec",
service = new google.maps.DistanceMatrixService();

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

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

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

尝试获取结果作为用户输入城市但没有...我尝试使用document.getelementbyid,但脚本无法正常工作。只能在html中预先编写。因此,如果我在HTML origin =“A”和destination =“B”中写入,它将计算从A到B的距离,但在浏览器中,数据无法更改......

我想要做的是:1。将第一个目的地值设置为固定2.用户在其位置键入3.具有计算从固定位置(之前设置)到其位置的点击距离的功能的按钮。 提前致谢!

1 个答案:

答案 0 :(得分:0)

没有任何反应,因为您不会尝试获取元素的。你只需选择元素。

所以你必须改变你的代码,如:

var orig = document.getElementById("orig").value,
dest = document.getElementById("dest").value,
dist = document.getElementById("dist").value;

它总是对console.log(orig)有帮助,所以你可以看到你拥有的东西!

var x = document.getElementById('orig');
console.log("this is just the element");
console.log(x);
console.log("----------------------------------");
var x = document.getElementById('orig').value;
console.log("this is the VALUE of the selected element");
console.log(x);
<input id="orig" type="text" style="width:35em" value="MyPlaceToCalculate">