如何在一个实例中未定义同一项目而又在另一个实例中进行定义

Bryan Hughes 发表于 Dev

布莱恩·休斯（Bryan Hughes）

4天，仍然无法解决。下面的脚本将计算从起始点到目标点在每种状态下行驶了多少英里。如果您的路线经过一个以上的州，则会在表格中填充2个字母的州缩写，并在第二列中填充该州的英里数。但是，如果您的路线保持在相同状态，则可以正确计算里程并显示在表的第2列中，但是第1列中不会显示2个字母的州缩写，而是表示未定义。进入两个或多个状态时如何定义，如果仅进入一个状态，则如何定义？在两种情况下都不应该是一种方式还是另一种方式？？？

<!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>

病毒

<!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="">

    <!--[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"></script>
</head>

<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 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>
                            </tr>
                        </tr>
                    </tr>
                </tr>
        </table>
    </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) {
                    // HERE'S THE FIX -- BEGIN
                    if (!stepEndState) {
                        stepEndState = startState;
                    }
                    // HERE'S THE FIX -- END
                    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>

</body>
</html>

问题是，stepEndState如果步骤未跨越状态边界，则该值将不存在。一种解决方法：向函数添加检查，compileMilesReciever()以便如果stepEndState没有值，请startState改用：

if(compileMilesIndex == orderedLatLngs.length) {
  if (!stepEndState) {
    stepEndState = startState;
  }
  stateMiles[stepEndState]=data.routes[0].legs[0].distance["text"];

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-03-1

我来说两句

0条评论

登录后参与评论

上一篇：OpenGL ES 2.0 Android Alpha显示为黑色

来自分类Dev

Related 相关文章

文章

如何在一个实例中未定义同一项目而又在另一个实例中进行定义

如何在一个实例中未定义同一项目而又在另一个实例中进行定义

如果同一项目存在于另一个列表中，如何从一个Excel列表中删除它

Django-rest-framework：如何在另一个应用程序（同一项目）中为ViewSet注册路由？

函数在同一个文件中定义但在另一个文件中未定义

未定义不是构造函数试图在另一个内部创建一个类的新实例

当将我的Mongoose数据库架构的一个实例放置在另一个架构中时，为什么会“广播到未定义”？

如何在未定义宽度的另一个div旁边显示一个div？

如何在未定义宽度的另一个div旁边显示div？

另一个Javascript未定义错误

如何将变量从一个函数访问到同一项目中不同控制器中的另一个函数

如何在同一项目中的不同包中引用一个类

如何在一个类中声明另一个类的实例

NameError：名称“ a”未定义。使用同一类中另一个函数的变量

在一个管道中定义的gulp var在另一个管道中未定义

如何访问同一实例中另一个类中的函数？

如何从同一实例中获取另一个日历结果？

Java（Eclipse）：如何从同一项目中的另一个类调用int或字符串？

eval（“ {}”）vs eval（“ x = {}”），一个返回未定义，而另一个{}

将一个.so与另一个链接时未定义的符号

eval（“ {}”）vs eval（“ x = {}”），一个返回未定义，而另一个{}

从同一对象的不同实例中触发另一个实例的函数

如何在实例化时在新类中创建另一个类的实例？

如何在不同类的另一个实例方法中引用实例方法？

如何将团队中的工作项目移动或复制到Azure Devops中同一项目中的另一个团队？

一个实例如何更改同一类的另一个实例的某些变量

如何使模板类的一个实例化与同一模板的另一个实例成为朋友

如何在DLL中定义另一个项目的函数调用

未定义的方法-从另一个文件中调用一个文件中的类

未定义引用来自Code :: Blocks中另一个项目的func

如果要定义一个由另一个类的实例组成的类，应该如何组织代码？