输出距离矩阵导致 div答案

【问题标题】：Outputting Distance Matrix results in a div输出距离矩阵导致 div
【发布时间】：2015-09-26 08:09:50
【问题描述】：

我正在使用here 找到的代码来计算地点之间的距离。

这是fiddle 和代码：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
origin = new google.maps.LatLng(40.689844,-74.044874),
destination = "Washington, DC",
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) {
    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>
</head>
<body>
<br>
Basic example for using the Distance Matrix.<br><br>
Origin: <input id="orig" type="text" style="width:35em"><br>
Destination: <input id="dest" type="text" style="width:35em"><br>
Distance from Statue of Liberty to Washington DC, USA (by car): <input id="dist" type="text" style="width:35em"><br>
</body>
</html>

一切正常，但我想用 div 标签更改输入标签。但是，如果我将“input id”更改为“div id”，它doesn't work：

Origin: <div id="orig" type="text" style="width:35em"></div>
Destination: <div id="dest" type="text" style="width:35em"></div>
Distance from Statue of Liberty to Washington DC, USA (by car): <div id="dist" type="text" style="width:35em"></div>

如果它是 div、input、span 或其他任何东西，只要它有那个 id，它不应该是无关紧要的吗？应该更改什么以在 div 中输出结果？谢谢。

【问题讨论】：

标签： javascript google-maps

【解决方案1】：

<div> 没有 value 属性，只有 input fields。您可以设置其innerHTML 或textContent 属性。

orig.innerHTML = response.destinationAddresses[0];

【讨论】：