Javascript 为什么这个脚本在state表列中放undefined？ 下面是HTML和JS。该脚本将提示用户按地址、城市、州、邮政编码以及目的地的地址输入起始位置。路线显示在地图上，脚本计算用户在每个州行驶的里程。然后将其放入一个表中，其中一列显示缩写的州名称，第二列显示该州的距离。如果驾驶员从KY行驶到TN，则计算每个州行驶的英里数。我遇到的问题是，如果用户的开始状态和目标状态相同，那么在表的state列中，它将显示undefined。英里数算起来很完美。是否存在允许未定义状态成为起始状态或先前状态的任何工作？ 变量方向请求={ 来源：“纽约州纽约市”//默认值 目的地：“洛杉矶”//默认 航路点：对， ProviderRouteAlternatives:false， travelMode:google.maps.travelMode.DRIVING， 驾驶选项：{ 出发时间：新日期（）， 流量模型：google.maps.trafficModel.悲观 } }; directionrequest.origin=提示（“输入起始地址”）； directionrequest.destination=提示（“输入您的目的地地址”）； var starttime=新日期（）； var geocoder=new google.maps.geocoder（）； var startState； 无功电流状态； var routeData； var指数=0； var stateChangeSteps=[]； var borderLatLngs={}； var-atlng； var endLatLng； directionsService=new google.maps.directionsService（）； 路由（directionrequest，init）； 函数初始化（数据）{ RoutedData=数据； displayRoute（）； STARTATLNG=data.routes[0]。支腿[0]。起始位置； endLatLng=data.routes[0]。支腿[0]。结束位置； geocoder.geocode（{location:data.routes[0]。legs[0]。start_location}，assignInitialState） } 函数赋值初始状态（数据）{ startState=getState（数据）； 当前状态=开始状态； 不动产（routeData）； } 函数getState（数据）{ 对于（变量i=0；i=data.routes[0]。legs[0]。steps.length）{ console.log（stateChangeSteps）； 指数=0； startBinarySearch（）； 返回； } setTimeout（函数（）{ geocoder.geocode（{location:data.routes[0].legs[0].steps[index].start_location}，compileStateSeceiver）； $（“#status”）.html（“索引步骤”+索引+“…”+数据.routes[0]。腿[0]。步数.length+“总步数”）； }, 3000) } } 函数CompileStatestReceiver（响应）{ state=getState（响应）； console.log（状态）； 如果（状态！=当前状态）{ 当前状态=状态； stateChangeSteps.push（索引-1）； } 索引++； 房地产（路线数据、索引）； } var指数=0； var阶跃状态=[]； var binaryCurrentState=“”； var stepNextState； var阶跃状态； var阶跃； var Mylatng={lat:39.8282，lng:-98.5795}； var map=new google.maps.map（document.getElementById（'map'）{ 缩放：4， 中心：myLatLng }); 函数displayRoute（）{ directionsDisplay=new google.maps.DirectionsRenderer（）； 方向显示.setMap（地图）； 方向显示。设置方向（路由数据）； } var orderedLatLngs=[]； 函数startBinarySearch（迭代）{ if（stepIndex>=stateChangeSteps.length）{ 用于（步进边框）{ for（在borderLatLngs[步骤]中的状态）{ 对于（borderLatLngs[步骤][状态]中的statename）{ （JSON.stringify（borderLatLngs[step][state][statename]，null，4））； orderedLatLngs.push（[borderLatLngs[step][state][statename]，statename]）； } } } 埃米尔斯（真）； 返回； //$（“#结果”）。追加（交叉到“+statename+”处”+ } 步骤=路由数据。路由[0]。支腿[0]。步骤[stateChangeSteps[stepIndex]； log（“查看步骤”+stateChangeSteps[stepIndex]）； borderLatLngs[stepIndex]={}； 如果（！迭代）{ binaryCurrentState=startState； } geocoder.geocode（{location:step.end_location}， 功能（数据）{ 如果（数据===null）{ setTimeout（函数（）{startBinarySearch（true）；}，6000）； }否则{ stepNextState=getState（数据）； stepEndState=stepNextState； 二进制阶段2（真）； } }); } var minIndex； var最大指数； var电流指数； 函数binaryStage2（init）{ if（typeof（init）！=“未定义”）{ minIndex=0； maxIndex=step.path.length-1； } 如果（（maxIndex minIndex）
您使用的是重复的ID。您永远不应该这样做 您正在向.state和.mile元素添加内容，该元素看起来不存在 编辑： 它使用css选择器 如果使用Javascript 为什么这个脚本在state表列中放undefined？ 下面是HTML和JS。该脚本将提示用户按地址、城市、州、邮政编码以及目的地的地址输入起始位置。路线显示在地图上，脚本计算用户在每个州行驶的里程。然后将其放入一个表中，其中一列显示缩写的州名称，第二列显示该州的距离。如果驾驶员从KY行驶到TN，则计算每个州行驶的英里数。我遇到的问题是，如果用户的开始状态和目标状态相同，那么在表的state列中，它将显示undefined。英里数算起来很完美。是否存在允许未定义状态成为起始状态或先前状态的任何工作？ 变量方向请求={ 来源：“纽约州纽约市”//默认值 目的地：“洛杉矶”//默认 航路点：对， ProviderRouteAlternatives:false， travelMode:google.maps.travelMode.DRIVING， 驾驶选项：{ 出发时间：新日期（）， 流量模型：google.maps.trafficModel.悲观 } }; directionrequest.origin=提示（“输入起始地址”）； directionrequest.destination=提示（“输入您的目的地地址”）； var starttime=新日期（）； var geocoder=new google.maps.geocoder（）； var startState； 无功电流状态； var routeData； var指数=0； var stateChangeSteps=[]； var borderLatLngs={}； var-atlng； var endLatLng； directionsService=new google.maps.directionsService（）； 路由（directionrequest，init）； 函数初始化（数据）{ RoutedData=数据； displayRoute（）； STARTATLNG=data.routes[0]。支腿[0]。起始位置； endLatLng=data.routes[0]。支腿[0]。结束位置； geocoder.geocode（{location:data.routes[0]。legs[0]。start_location}，assignInitialState） } 函数赋值初始状态（数据）{ startState=getState（数据）； 当前状态=开始状态； 不动产（routeData）； } 函数getState（数据）{ 对于（变量i=0；i=data.routes[0]。legs[0]。steps.length）{ console.log（stateChangeSteps）； 指数=0； startBinarySearch（）； 返回； } setTimeout（函数（）{ geocoder.geocode（{location:data.routes[0].legs[0].steps[index].start_location}，compileStateSeceiver）； $（“#status”）.html（“索引步骤”+索引+“…”+数据.routes[0]。腿[0]。步数.length+“总步数”）； }, 3000) } } 函数CompileStatestReceiver（响应）{ state=getState（响应）； console.log（状态）； 如果（状态！=当前状态）{ 当前状态=状态； stateChangeSteps.push（索引-1）； } 索引++； 房地产（路线数据、索引）； } var指数=0； var阶跃状态=[]； var binaryCurrentState=“”； var stepNextState； var阶跃状态； var阶跃； var Mylatng={lat:39.8282，lng:-98.5795}； var map=new google.maps.map（document.getElementById（'map'）{ 缩放：4， 中心：myLatLng }); 函数displayRoute（）{ directionsDisplay=new google.maps.DirectionsRenderer（）； 方向显示.setMap（地图）； 方向显示。设置方向（路由数据）； } var orderedLatLngs=[]； 函数startBinarySearch（迭代）{ if（stepIndex>=stateChangeSteps.length）{ 用于（步进边框）{ for（在borderLatLngs[步骤]中的状态）{ 对于（borderLatLngs[步骤][状态]中的statename）{ （JSON.stringify（borderLatLngs[step][state][statename]，null，4））； orderedLatLngs.push（[borderLatLngs[step][state][statename]，statename]）； } } } 埃米尔斯（真）； 返回； //$（“#结果”）。追加（交叉到“+statename+”处”+ } 步骤=路由数据。路由[0]。支腿[0]。步骤[stateChangeSteps[stepIndex]； log（“查看步骤”+stateChangeSteps[stepIndex]）； borderLatLngs[stepIndex]={}； 如果（！迭代）{ binaryCurrentState=startState； } geocoder.geocode（{location:step.end_location}， 功能（数据）{ 如果（数据===null）{ setTimeout（函数（）{startBinarySearch（true）；}，6000）； }否则{ stepNextState=getState（数据）； stepEndState=stepNextState； 二进制阶段2（真）； } }); } var minIndex； var最大指数； var电流指数； 函数binaryStage2（init）{ if（typeof（init）！=“未定义”）{ minIndex=0； maxIndex=step.path.length-1； } 如果（（maxIndex minIndex）,javascript,html,google-maps,Javascript,Html,Google Maps,您使用的是重复的ID。您永远不应该这样做 您正在向.state和.mile元素添加内容，该元素看起来不存在 编辑： 它使用css选择器 如果使用$（.foo”）.append（“bar”）；则使用类将“bar”追加到元素中。 如果执行$（“#foo”）.append（“bar”）；，则将“bar”附加到具有idfoo的元素 在您的案例中，内容是ap Below is the HTML and the JS. The script will prompt the user to enter a
$（.foo”）.append（“bar”）；类将“bar”追加到元素中。
如果执行$（“#foo”）.append（“bar”）；
，则将“bar”附加到具有id
foo的元素
在您的案例中，内容是ap
Below is the HTML and the JS. The script will prompt the user to enter a starting location by address,city,state,zip, and the same for the destination. the route shows on the map and the script calculates the mileage for each state the user drives in. Then puts it into a table with one column showing the State name Abbreviated, and the second column shows the distance for that state. If the driver goes from KY to TN the mileage is calculated for the number of miles driven in each state. The problem I am having is that if the users' starting state and destination state are the same, in the state column of the table it will display undefined. the miles calculate perfectly. Is there any kind of work around that would allow the undefined to be the starting state, or previous state?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Tue, 03 May 2016 17:18:33 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR KEY &callback=initMap"></script>
<body>
<div id="map" style="height:400px"></div>
<div id="status"></div>
<div id="results"></div>
<div id="table"></div>
<div style=" text-align: left; text-indent: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;">
<table>
<table width="40%" border="1" cellpadding="2" cellspacing="2" style="border-color: #000000; border-style: solid; background-color: #ffffff;">
<tr valign="top">
<td style="border-color : #000000 #000000 #000000 #000000; border-style: solid;" class="state1"><br />
</td>
<td style="border-color : #000000 #000000 #000000 #000000; border-style: solid;" class="mile1"><br />
</td>
<tr valign="top">
<td style="border-color : #000000 #000000 #000000 #000000; border-style: solid;" class="state2"><br />
</td>
<td style="border-color : #000000 #000000 #000000 #000000; border-style: solid;" class="mile2"><br />
</td>
<tr valign="top">
<td style="border-color : #000000 #000000 #000000 #000000; border-style: solid;" class="state3"><br />
</td>
<td style="border-color : #000000 #000000 #000000 #000000; border-style: solid;" class="mile3"><br />
</td>
<tr valign="top">
<td style="border-color : #000000 #000000 #000000 #000000; border-style: solid;" class="state4"><br />
</td>
<td style="border-color : #000000 #000000 #000000 #000000; border-style: solid;" class="mile4"><br />
</td>
<tr valign="top">
<td style="border-color : #000000 #000000 #000000 #000000; border-style: solid;" class="state5"><br />
</td>
<td style="border-color : #000000 #000000 #000000 #000000; border-style: solid;" class="mile5"><br />
</td>
<tr valign="top">
<td style="border-color : #000000 #000000 #000000 #000000; border-style: solid;" class="state6"><br />
</td>
<td style="border-color : #000000 #000000 #000000 #000000; border-style: solid;" class="mile6"><br />
</td>
</tr>
</table>
</div>
</div>
<script>
var directionsRequest = {
origin: "New York, NY", //default
destination: "Los Angeles, LA", //default
optimizeWaypoints: true,
provideRouteAlternatives: false,
travelMode: google.maps.TravelMode.DRIVING,
drivingOptions: {
departureTime: new Date(),
trafficModel: google.maps.TrafficModel.PESSIMISTIC
}
};
directionsRequest.origin = prompt("Enter your starting address");
directionsRequest.destination = prompt("Enter your destination address");
var starttime = new Date();
var geocoder = new google.maps.Geocoder();
var startState;
var currentState;
var routeData;
var index = 0;
var stateChangeSteps = [];
var borderLatLngs = {};
var startLatLng;
var endLatLng;
directionsService = new google.maps.DirectionsService();
directionsService.route(directionsRequest, init);
function init(data){
routeData = data;
displayRoute();
startLatLng = data.routes[0].legs[0].start_location;
endLatLng = data.routes[0].legs[0].end_location;
geocoder.geocode({location:data.routes[0].legs[0].start_location}, assignInitialState)
}
function assignInitialState(data){
startState = getState(data);
currentState = startState;
compileStates(routeData);
}
function getState(data){
for (var i = 0; i < data.length; i++) {
if (data[i].types[0] === "administrative_area_level_1") {
var state = data[i].address_components[0].short_name;
}
}
return state;
}
function compileStates(data, this_index){
if(typeof(this_index) == "undefined"){
index = 1;
geocoder.geocode({location:data.routes[0].legs[0].steps[0].start_location}, compileStatesReceiver);
}else
{
if(index >= data.routes[0].legs[0].steps.length){
console.log(stateChangeSteps);
index = 0;
startBinarySearch();
return;
}
setTimeout(function(){
geocoder.geocode({location:data.routes[0].legs[0].steps[index].start_location}, compileStatesReceiver);
$("#status").html("Indexing Step "+index+"... "+data.routes[0].legs[0].steps.length+" Steps Total");
}, 3000)
}
}
function compileStatesReceiver(response){
state = getState(response);
console.log(state);
if(state != currentState){
currentState = state;
stateChangeSteps.push(index-1);
}
index++;
compileStates(routeData, index);
}
var stepIndex = 0;
var stepStates = [];
var binaryCurrentState = "";
var stepNextState;
var stepEndState;
var step;
var myLatLng = {lat:39.8282, lng:-98.5795};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
function displayRoute() {
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
directionsDisplay.setDirections(routeData);
}
var orderedLatLngs = [];
function startBinarySearch(iterating){
if(stepIndex >= stateChangeSteps.length){
for(step in borderLatLngs){
for(state in borderLatLngs[step]){
for(statename in borderLatLngs[step][state]){
(JSON.stringify(borderLatLngs[step][state][statename],null, 4));
orderedLatLngs.push([borderLatLngs[step][state][statename], statename]);
}
}
}
compileMiles(true);
return;
//$("#results").append("<br>Cross into "+statename+" at "+
}
step = routeData.routes[0].legs[0].steps[stateChangeSteps[stepIndex]];
console.log("Looking at step "+stateChangeSteps[stepIndex]);
borderLatLngs[stepIndex] = {};
if(!iterating){
binaryCurrentState = startState;
}
geocoder.geocode({location:step.end_location},
function(data){
if(data === null){
setTimeout(function(){startBinarySearch(true);}, 6000);
}else{
stepNextState = getState(data);
stepEndState = stepNextState;
binaryStage2(true);
}
});
}
var minIndex;
var maxIndex;
var currentIndex;
function binaryStage2(init){
if (typeof(init) != "undefined"){
minIndex = 0;
maxIndex = step.path.length - 1;
}
if((maxIndex-minIndex)<2){
borderLatLngs[stepIndex][maxIndex]={};
borderLatLngs[stepIndex][maxIndex][stepNextState]=step.path[maxIndex];
var marker = new google.maps.Marker({
position: borderLatLngs[stepIndex][maxIndex][stepNextState],
map: map,
});
if(stepNextState != stepEndState){
minIndex = maxIndex;
maxIndex = step.path.length - 1;
binaryCurrentState = stepNextState;
stepNextState = stepEndState;
}else{
stepIndex++;
binaryCurrentState = stepNextState;
startBinarySearch(true);
return;
}
}
console.log("Index starts: "+minIndex+" "+maxIndex);
console.log("current state is "+binaryCurrentState);
console.log("next state is "+ stepNextState);
console.log("end state is "+ stepEndState);
currentIndex = Math.floor((minIndex+maxIndex)/2);
setTimeout(function(){
geocoder.geocode({location:step.path[currentIndex]}, binaryStage2Reciever);
$("#status").html("Searching for division between "+binaryCurrentState+" and "+stepNextState+" between indexes "+minIndex+" and "+maxIndex+"...")
}, 3000);
}
function binaryStage2Reciever(response){
if(response === null){
setTimeout(binaryStage2, 6000);
}else{
state = getState(response)
if(state == binaryCurrentState){
minIndex = currentIndex +1;
}else{
maxIndex = currentIndex - 1
if(state != stepNextState){
stepNextState = state;
}
}
binaryStage2();
}
}
var currentStartPoint;
var compileMilesIndex = 0;
var stateMiles = {};
var trueState;
function compileMiles(init){
if(typeof(init)!= "undefined"){
currentStartPoint = startLatLng;
trueState = startState;
}
if(compileMilesIndex == orderedLatLngs.length){
directionsRequest.destination = endLatLng;
}else{
directionsRequest.destination = orderedLatLngs[compileMilesIndex][0];
}
directionsRequest.origin = currentStartPoint;
currentStartPoint = directionsRequest.destination;
directionsService.route(directionsRequest, compileMilesReciever)
}
function compileMilesReciever(data){
if(data===null){
setTimeout(compileMiles, 6000);
}else{
if(compileMilesIndex == orderedLatLngs.length){
stateMiles[stepEndState]=data.routes[0].legs[0].distance["text"];
var txt = "";
var i = 0;
for(state in stateMiles)
{
i++;
$("#results").append
$(".state"+i).append(state);
$(".mile"+i).append(stateMiles[state]);
}
var endtime = new Date();
totaltime = endtime - starttime;
//$("#results").append("<br><br>Operation took "+Math.floor(totaltime/60000)+" minute(s) and "+(totaltime%60000)/1000+" second(s) to run.");
return;
}else{
stateMiles[trueState]=data.routes[0].legs[0].distance["text"];
}
trueState = orderedLatLngs[compileMilesIndex][1];
compileMilesIndex++;
setTimeout(compileMiles, 3000);
}
}
</script>
<script>
</script>
</script>
</head>
</script>
</body>
</html>