Javascript 同一项如何在一个实例中未定义，而在另一个实例中定义
4天了，但还是没弄明白。下面的脚本将计算每个州从起点到终点的行驶里程。 如果您的路线经过多个州，则该表将填充两个字母的州缩写，并在第2列中填充该州的英里数。但是，如果您的路线处于相同的状态，则里程会正确计算并显示在表的第2列中，但第1列中不会显示2个字母的状态缩写，而是显示为“未定义”。当两个或多个状态进入时，如何定义它；如果只有一个状态进入，如何定义它。在这两种情况下不应该是这样或那样吗Javascript 同一项如何在一个实例中未定义，而在另一个实例中定义,javascript,html,Javascript,Html,4天了，但还是没弄明白。下面的脚本将计算每个州从起点到终点的行驶里程。 如果您的路线经过多个州，则该表将填充两个字母的州缩写，并在第2列中填充该州的英里数。但是，如果您的路线处于相同的状态，则里程会正确计算并显示在表的第2列中，但第1列中不会显示2个字母的状态缩写，而是显示为“未定义”。当两个或多个状态进入时，如何定义它；如果只有一个状态进入，如何定义它。在这两种情况下不应该是这样或那样吗 <!DOCTYPE html> <html lang="en">
<!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= &callback"></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>
变量方向请求={
来源：“纽约州纽约市”//默认值
目的地：“洛杉矶”//默认
航路点：对，
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；
v