Question

我有点陷入“未定义”异常中。我正在编写一个记录两个地方之间的行进距离的工具。该应用程序使用谷歌地图距离矩阵。当用户选择车辆时，填写起点和目的地，然后单击“创建行程对象”，将创建一个tripObject，然后将其表示在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>

Answer 1

通常，所有函数都应返回...某些内容。

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

在“ createTripObject”中，您什么都不返回。

将值分配给对象属性的另一种方法是：

someObject.someProperty = 123

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

如果已经存在，则将其替换为新值。如果不存在，则将首先创建它，然后使用该值。

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

Answer 2

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

这里是JSFiddle，您可以在其中看到回调的作用。

{{1}}

无法找出“未定义”错误背后的逻辑Google Maps Distance Service

2 个答案: