我正在运行一个带有应用程序的循环，但我想将行中的数据分配给各个html元素。如果你能告诉我代码有什么问题，我会很感激。
我想根据一个距离和时间从几个不同的点做到通过javascript获取信息并在html上显示元素
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>distancematrixjs</title>
</head>
<body>
<div id="sonuc">
<p id="mesafe1">Mesafe 1:</p>
<p id="sure1">Süre 1:</p>
<p id="StatusDurum">Durum:</p>
<input type="button" value="hesapla" onClick="getDistance()"/>
</div>
<script type="text/javascript">
var origin1 = {lat: 41.67415, lng: 26.56253};
var destinationA = 'İstanbul, Türkiye';
function getDistance()
{
var service=new google.maps.DistanceMatrixService;
service.getDistanceMatrix({
origins:[origin1],
destinations:[destinationA],
travelMode:'DRIVING',
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
},function(response,status){
if(status !=='OK'){
StatusDurum.innerHTML+='Hata'+status;
}else{
StatusDurum.innerHTML+=response;
var outputMesafe1=document.getElementById('mesafe1');
var outputSure1=document.getElementById('sure1');
outputMesafe1.innerHTML+=response.rows[0].elements[0].distance.text;
outputSure1.innerHTML+=response.rows[0].elements[0].duration.text;
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR-APİ-KEY&callback=initMap">
</script>
</body>
</html>调用函数时断开结构。 Google库上传指定了函数调用“callback = initMap”，您不需要它。此外，为了使一切正常，您需要从Google获取API KEY并将其嵌入到库中，而不是YOUR_API_KEY
<script>
var origin1 = {lat: 41.67415, lng: 26.56253};
var destinationA = 'İstanbul, Türkiye';
function getDistance() {
var service=new google.maps.DistanceMatrixService;
service.getDistanceMatrix({
origins:[origin1],
destinations:[destinationA],
travelMode:'DRIVING',
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
},function(response,status){
if(status !=='OK'){
StatusDurum.innerHTML+='Hata'+status;
}else{
StatusDurum.innerHTML+=response;
var outputMesafe1=document.getElementById('mesafe1');
var outputSure1=document.getElementById('sure1');
outputMesafe1.innerHTML+=response.rows[0].elements[0].distance.text;
outputSure1.innerHTML+=response.rows[0].elements[0].duration.text;
}
})
};
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>