0

我有点陷入“未定义”异常中。我正在编写一个记录两个地方之间行驶距离的工具。该应用程序使用谷歌地图距离矩阵。当用户选择车辆，填写起点和终点，然后单击“创建行程对象”时，会创建一个行程对象，然后将其表示在div-element. 作为一项基本测试，该应用程序会以公里为单位提醒两个地方之间的距离。这工作正常。但是我不知道如何在tripObject中注册该值，当应该在div元素内显示距离时，它一直给我一个“未定义”通知，其余的工作正常。

我了解此通知是由一些逻辑错误引起的。但是现在我还没有弄清楚是什么逻辑错误导致了这个问题。我注意到我经常面临这些问题。那么有人可以向我解释我犯了什么逻辑错误吗？下面是它的 HTML 和 Javascript 组合的代码。

var lastTripNr = 0;
	
	var distance;
	
	function calculateMapsDistance(orig,dest)
	{
		var calculatedDistance;
		
		var directionsService = new google.maps.DirectionsService();
		
		var request = 
		{
			origin: orig,
			destination: dest,
			travelMode: google.maps.DirectionsTravelMode.DRIVING
		};
		
		directionsService.route(request,function(response,status)
		{
			if (status==google.maps.DirectionsStatus.OK)
			{
				alert((response.routes[0].legs[0].distance.value)/1000);
				calculatedDistance = response.routes[0].legs[0].distance.value /1000;
				
			}
			else
			{
				alert("no route found!");
			}
		});
		
		return calculatedDistance;
		
	}
	
	
	function createTripObject()
	{
		lastTripNr++;
		
		var date = new Date();
		
		var dateString = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
		
		var selectionElement = document.getElementById("vehicle");
		var selectedVehicle = selectionElement.options[selectionElement.selectedIndex].value;
		
		var origin = document.getElementById("from").value;
		var destination = document.getElementById("to").value;
		
		var distance = calculateMapsDistance(origin,destination);
		
		var tripObject = 
		{
			nr: lastTripNr,
			date: dateString,
			vehicle: selectedVehicle,
			orig: origin,
			dest: destination,
			dist: distance
		};
		
		document.getElementById("content").innerHTML += "<p>"+tripObject.nr + " | " + tripObject.date + " | " + tripObject.vehicle + " | " + tripObject.orig + " | " + tripObject.dest + " | " + tripObject.dist + 
		"</p>";
		
	}
<html>
<head>
	<title>basic directions service</title>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
</head>
<body>

<table id="interface">
	<tr>
		<th>vehicle</th>
		<th>from:</th>
		<th>to:</th>
		<th>distance:</th>
	</tr>
	<tr>
		<td>
			<select id="vehicle">
				<option value="Agila">Opel Agila</option>
				<option value="Peugeot">Peugeot 108</option>
				<option value="Atos">Hyundai Atos</option>
				<option value="Matiz">Chevrolet Matiz</option>
				<option value="Overig">overig</option>
			</select>
		</td>
		
		<td><input id="from" type="text"></td>
		<td><input id="to" type="text"></td>
	</tr>
	<tr>
		<td colspan = "4"><button onclick="createTripObject()">create trip object</button></td>
	</tr>
</table>
<div id="content"></div>


<script>
	
</script>
</body>
</html>

4

2 回答 2

0

您需要记住，用于计算距离的数据是异步加载的。因此，在向页面添加任何内容之前，您需要使用回调或承诺等待该信息被发回。

这是一个JSFiddle，您可以在其中看到回调的运行情况。

  directionsService.route(request,function(response,status){
    if (status==google.maps.DirectionsStatus.OK){
     calculatedDistance = response.routes[0].legs[0].distance.value /1000;
     createTripObject(orig,dest, calculatedDistance)
  }
}
于 2018-08-22T21:45:28.210 回答
0

通常，所有函数都应该返回……一些东西。

在“calculateMapsDistance”中，您返回“calculatedDistance”。

在“createTripObject”中，您没有返回任何内容。

为对象的属性赋值的另一种方法是：

someObject.someProperty = 123

“someProperty”是否存在并不重要。

如果它已经存在，它只会用新值替换现有值。如果不存在，则会先创建它，然后再取值。

（顺便说一句，你的代码结构很好，我喜欢缩进！;）

于 2018-08-22T21:24:20.680 回答