Javascript 我试图根据距离来找到一条特定路线的价格,但每当我放置位置时,if循环返回的是else,而不是价格 //main.js //设置地图选项 var Mylatng={lat:51.5,lng:-0.1}; 变量映射选项={ 中心:myLatLng, 缩放:7, mapTypeId:google.maps.mapTypeId.ROADMAP }; //创建地图 var map=new google.maps.map(document.getElementById('googleMap')、mapOptions); //创建DirectionService对象以使用route方法并获得请求的结果 var directionsService=new google.maps.directionsService(); //创建一个DirectionsRenderer对象,用于显示路线 var directionsDisplay=new google.maps.DirectionsRenderer(); //将DirectionsRenderer绑定到地图 方向显示.setMap(地图); //定义calcRoute函数 函数calcRoute(){ //创建请求 var请求={ 来源:document.getElementById(“源”).value, 目的地:document.getElementById(“目的地”).value, travelMode:google.maps.travelMode.DRIVING、//步行、骑自行车、公交 unitSystem:google.maps.unitSystem.METRIC } //将请求传递给route方法 路由(请求、功能(结果、状态){ if(status==google.maps.directionstatus.OK){ //获取距离和时间 var distance=result.routes[0]。legs[0]。distance.text; $(“#输出”).html(“从:”+document.getElementById(“源”).value+”到:“+document.getElementById(“目的地”).value+”行驶距离:“+result.routes[0].legs[0].distance.text+”持续时间:“+result.routes[0].legs[0].Duration.text+”; //开始计算价格 if(result.routes[0].legs[0].distance.value

Javascript 我试图根据距离来找到一条特定路线的价格,但每当我放置位置时,if循环返回的是else,而不是价格 //main.js //设置地图选项 var Mylatng={lat:51.5,lng:-0.1}; 变量映射选项={ 中心:myLatLng, 缩放:7, mapTypeId:google.maps.mapTypeId.ROADMAP }; //创建地图 var map=new google.maps.map(document.getElementById('googleMap')、mapOptions); //创建DirectionService对象以使用route方法并获得请求的结果 var directionsService=new google.maps.directionsService(); //创建一个DirectionsRenderer对象,用于显示路线 var directionsDisplay=new google.maps.DirectionsRenderer(); //将DirectionsRenderer绑定到地图 方向显示.setMap(地图); //定义calcRoute函数 函数calcRoute(){ //创建请求 var请求={ 来源:document.getElementById(“源”).value, 目的地:document.getElementById(“目的地”).value, travelMode:google.maps.travelMode.DRIVING、//步行、骑自行车、公交 unitSystem:google.maps.unitSystem.METRIC } //将请求传递给route方法 路由(请求、功能(结果、状态){ if(status==google.maps.directionstatus.OK){ //获取距离和时间 var distance=result.routes[0]。legs[0]。distance.text; $(“#输出”).html(“从:”+document.getElementById(“源”).value+”到:“+document.getElementById(“目的地”).value+”行驶距离:“+result.routes[0].legs[0].distance.text+”持续时间:“+result.routes[0].legs[0].Duration.text+”; //开始计算价格 if(result.routes[0].legs[0].distance.value,javascript,html,google-maps,Javascript,Html,Google Maps,在您的用例中,您可以使用。它将更高效,更易于调试 对于您的用例,您可以创建2个switch语句:1个用于汽车类,1个用于距离。下面是一个根据到源和目的地的距离计算旅行费用的语句。我将代码中的一些值作为基础 下面是我在汽车类的Switch语句中使用Switch语句表示距离的部分 //main.js //set map options var myLatLng = { lat: 51.5, lng: -0.1 }; var mapOptions = { cen

在您的用例中,您可以使用。它将更高效,更易于调试

对于您的用例,您可以创建2个switch语句:1个用于汽车类,1个用于距离。下面是一个根据到源和目的地的距离计算旅行费用的语句。我将代码中的一些值作为基础

下面是我在汽车类的Switch语句中使用Switch语句表示距离的部分

//main.js
    //set map options
    var myLatLng = { lat: 51.5, lng: -0.1 };
    var mapOptions = {
        center: myLatLng,
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP

    };

    //create map
    var map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);

    //create a DirectionsService object to use the route method and get a result for our request
    var directionsService = new google.maps.DirectionsService();

    //create a DirectionsRenderer object which we will use to display the route
    var directionsDisplay = new google.maps.DirectionsRenderer();

    //bind the DirectionsRenderer to the map
    directionsDisplay.setMap(map);


    //define calcRoute function
    function calcRoute() {
        //create request

        var request = {
            origin: document.getElementById("source").value,

            destination: document.getElementById("destination").value,
            travelMode: google.maps.TravelMode.DRIVING, //WALKING, BYCYCLING, TRANSIT
            unitSystem: google.maps.UnitSystem.METRIC
        }

        //pass the request to the route method
        directionsService.route(request, function (result, status) {
            if (status == google.maps.DirectionsStatus.OK) {

                //Get distance and time
                var distance = result.routes[0].legs[0].distance.text;
                $("#output").html("<div class='alert-info'>From: " + document.getElementById("source").value + ".<br />To: " + document.getElementById("destination").value + ".<br /> Driving distance: " + result.routes[0].legs[0].distance.text + ".<br />Duration: " + result.routes[0].legs[0].duration.text + ".</div>");

                //START CALCULATING PRICE
                if(result.routes[0].legs[0].distance.value <= 20 && document.getElementById("carclass").value == 1  ){
                        document.getElementById("fareairport").value = "30000";
                    }else if(result.routes[0].legs[0].distance.value <= 20 && document.getElementById("carclass").value == 2  ) {
                        document.getElementById("fareairport").value = "50000";
                    }else if(result.routes[0].legs[0].distance.value <= 20 && document.getElementById("carclass").value == 3  ) {
                        document.getElementById("fareairport").value = "50000";
                    }else if(result.routes[0].legs[0].distance.value <= 20 && document.getElementById("carclass").value == 4  ) {
                        document.getElementById("fareairport").value = "100000";
                    }else if(result.routes[0].legs[0].distance.value <= 20 && document.getElementById("carclass").value == 5  ) {
                        document.getElementById("fareairport").value = "50000";
                    }else if(result.routes[0].legs[0].distance.value <= 20 && document.getElementById("carclass").value == 6  ) {
                        document.getElementById("fareairport").value = "100000";            
                    }else if(result.routes[0].legs[0].distance.value <= 20 && document.getElementById("carclass").value == 7  ) {
                        document.getElementById("fareairport").value = "200000";
                    //END OF ZONE A
                 }
                 else if(result.routes[0].legs[0].distance.value >= 21 && result.routes[0].legs[0].distance.value <= 30 && document.getElementById("carclass").value == 1  ) {
                    document.getElementById("fareairport").value = "70000";
                 }else if(result.routes[0].legs[0].distance.value >= 21 && result.routes[0].legs[0].distance.value <= 30 && document.getElementById("carclass").value == 2  ) {
                    document.getElementById("fareairport").value = "100000";
                 }else if(result.routes[0].legs[0].distance.value >= 21 && result.routes[0].legs[0].distance.value <= 30 && document.getElementById("carclass").value == 3  ) {
                         document.getElementById("fareairport").value = "100000";
                 }else if(result.routes[0].legs[0].distance.value >= 21 && result.routes[0].legs[0].distance.value <= 30 && document.getElementById("carclass").value == 4  ) {
                    document.getElementById("fareairport").value = "150000";
                 }else if(result.routes[0].legs[0].distance.value >= 21 && result.routes[0].legs[0].distance.value <= 30 && document.getElementById("carclass").value == 5  ) {
                    document.getElementById("fareairport").value = "90000";
                 }else if(result.routes[0].legs[0].distance.value >= 21 && result.routes[0].legs[0].distance.value <= 30 && document.getElementById("carclass").value == 6  ) {
                    document.getElementById("fareairport").value = "120000";
                 }else if(result.routes[0].legs[0].distance.value >= 21 && result.routes[0].legs[0].distance.value <= 30 && document.getElementById("carclass").value == 7  ) {
                    document.getElementById("fareairport").value = "200000";
                 } //END OF ZONE B
                else if(result.routes[0].legs[0].distance.value >= 31 && result.routes[0].legs[0].distance.value <= 40 && document.getElementById("carclass").value == 1 ) {
                    document.getElementById("fareairport").value = "100000";
               }else if(result.routes[0].legs[0].distance.value >= 31 && result.routes[0].legs[0].distance.value <= 40 && document.getElementById("carclass").value == 2 ) {
                    document.getElementById("fareairport").value = "150000";
                }else if(result.routes[0].legs[0].distance.value >= 31 && result.routes[0].legs[0].distance.value <= 40 && document.getElementById("carclass").value == 3  ) {
                    document.getElementById("fareairport").value = "150000";
                }else if(result.routes[0].legs[0].distance.value >= 31 && result.routes[0].legs[0].distance.value <= 40 && document.getElementById("carclass").value == 4  ) {
                    document.getElementById("fareairport").value = "250000";
                }else if(result.routes[0].legs[0].distance.value >= 31 && result.routes[0].legs[0].distance.value <= 40 && document.getElementById("carclass").value == 5  ) {
                    document.getElementById("fareairport").value = "170000";
                }else if(result.routes[0].legs[0].distance.value >= 31 && result.routes[0].legs[0].distance.value <= 40 && document.getElementById("carclass").value == 6  ) {
                    document.getElementById("fareairport").value = "250000";
                }else if(result.routes[0].legs[0].distance.value >= 31 && result.routes[0].legs[0].distance.value <= 40 && document.getElementById("carclass").value == 7  ) {
                   document.getElementById("fareairport").value = "300000";
                } //END OF ZONE C
                else if(result.routes[0].legs[0].distance.value >= 41 && result.routes[0].legs[0].distance.value <= 50 && document.getElementById("carclass").value == 1 ) {
                    document.getElementById("fareairport").value = "130000";
                }else if(result.routes[0].legs[0].distance.value >= 41 && result.routes[0].legs[0].distance.value <= 50 && document.getElementById("carclass").value == 2 ) {
                   document.getElementById("fareairport").value = "200000";
               }else if(result.routes[0].legs[0].distance.value >= 41 && result.routes[0].legs[0].distance.value <= 50 && document.getElementById("carclass").value == 3  ) {
                    document.getElementById("fareairport").value = "200000";
                }else if(result.routes[0].legs[0].distance.value >= 41 && result.routes[0].legs[0].distance.value <= 50 && document.getElementById("carclass").value == 4  ) {
                    document.getElementById("fareairport").value = "300000";
               }else if(result.routes[0].legs[0].distance.value >= 41 && result.routes[0].legs[0].distance.value <= 50 && document.getElementById("carclass").value == 5  ) {
                    document.getElementById("fareairport").value = "200000";
                }else if(result.routes[0].legs[0].distance.value >= 41 && result.routes[0].legs[0].distance.value <= 50 && document.getElementById("carclass").value == 6  ) {
                    document.getElementById("fareairport").value = "300000";
                }else if(result.routes[0].legs[0].distance.value >= 41 && result.routes[0].legs[0].distance.value <= 50 && document.getElementById("carclass").value == 7  ) {
                    document.getElementById("fareairport").value = "330000";
                }//END OF ZONE D
                else if(result.routes[0].legs[0].distance.value >= 51 && result.routes[0].legs[0].distance.value <= 60 && document.getElementById("carclass").value == 1 ) {
                   document.getElementById("fareairport").value = "160000";
                }else if(result.routes[0].legs[0].distance.value >= 51 && result.routes[0].legs[0].distance.value <= 60 && document.getElementById("carclass").value == 2 ) {
                   document.getElementById("fareairport").value = "200000";
                }else if(result.routes[0].legs[0].distance.value >= 51 && result.routes[0].legs[0].distance.value <= 60 && document.getElementById("carclass").value == 3  ) {
                    document.getElementById("fareairport").value = "200000";
                }else if(result.routes[0].legs[0].distance.value >= 51 && result.routes[0].legs[0].distance.value <= 60 && document.getElementById("carclass").value == 4  ) {
                    document.getElementById("fareairport").value = "300000";
                }else if(result.routes[0].legs[0].distance.value >= 51 && result.routes[0].legs[0].distance.value <= 60 && document.getElementById("carclass").value == 5  ) {
                   document.getElementById("fareairport").value = "200000";
               }else if(result.routes[0].legs[0].distance.value >= 51 && result.routes[0].legs[0].distance.value <= 60 && document.getElementById("carclass").value == 6  ) {
                    document.getElementById("fareairport").value = "300000";
                }else if(result.routes[0].legs[0].distance.value >= 51 && result.routes[0].legs[0].distance.value <= 60 && document.getElementById("carclass").value == 7  ) {
                    document.getElementById("fareairport").value = "330000";
                }
                //END OF ZONE E
                else{

                    alert(document.getElementById("carclass").value);
                }

                //display route
                directionsDisplay.setDirections(result);
        } else {
                //delete route from map
                directionsDisplay.setDirections({ routes: [] });
                //center map in London
                map.setCenter(myLatLng);

                //show error message
                $("#output").html("<div class='alert-danger'>Could not retrieve driving distance.</div>");
        }
        });

    }



    //create autocomplete objects for all inputs
    var options = {
        types: ['(places)']
    }
<div class="row">

                    <form name="airport_booking" method="POST" action="{{action('Spe\AirporttransfersController@store')}}" role="form" class="form-horizontal" id="pickup">
                            <input type="hidden" name="_token" value="{{ csrf_token() }}">

                                <input type="hidden" name="type" >   
                            <div class="form-row">

                                <div class="col-md-6 col-sm-6 search-col-padding">
                                    <label>Full Name</label>
                                    <div class="input-group">
                                        <input type="text" name="fullname" class="form-control" required disabled value="{{$summary['fullname']}}"  >
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-6 search-col-padding">
                                    <label>Telephone</label>
                                    <div class="input-group">
                                        <input type="tel" id="pickup_telephone" name="Telephone" pattern="^[0-9\ \(\)\+]{13}" class="form-control" disabled style="width:21.5em" value="{{$summary['telephone']}}" >
                                    </div>
                                </div>
                                <div class="clearfix"></div>
                                <div class="col-md-6 col-sm-6 search-col-padding">
                                    <label>Email</label>
                                    <div class="input-group">
                                        <input type="email" name="email" class="form-control" disabled value="{{$summary['email']}}" >
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-6 search-col-padding">
                                    <label>Arrival</label>
                                    <div class="input-group">
                                        <input type="text" name="pickupdate" onchange="checkDate_arrival()" value="{{$summary['pickupdate']}}" id="arrival"  class="form-control datetimepicker" disabled>
                                        <div class="input-group-append">
                                            <span class="input-group-text">
                                                <i class="fa fa-clock-o fa-fw"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-3 col-3 search-col-padding">
                                    <label>Adults</label>
                                    <input type="text" name="adults" id="arrival" value="{{$summary['adults']}}" class="form-control datetimepicker" disabled >
                                </div>

                                <div class="col-md-3 col-sm-3 col-3 search-col-padding">
                                    <label>Children</label>
                                    <input type="text" name="children" value="{{$summary['children']}}"  id="arrival" class="form-control" disabled >
                                </div>


                                <div class="col-md-3 col-sm-3 col-3 search-col-padding">
                                    <label>Elderly</label>
                                    <input type="text" name="elderly" id="arrival" value="{{$summary['elderly']}}" class="form-control" disabled>
                                </div>
                                <div class="col-md-6 col-sm-6 col-6 search-col-padding">
                                   <label>Airline</label>
                                    <div class="input-group">
                                        <input type="text" name="airline" value="{{$summary['airline']}}" class="form-control" disabled >
                                    </div>
                                </div>
                                 <div class="col-md-6 col-sm-6 col-6 search-col-padding">
                                   <label>Flight Number</label>
                                    <div class="input-group">
                                        <input type="text" name="flightnumber" value="{{$summary['flightnumber']}}" class="form-control"  disabled >
                                    </div>
                                </div>
                                <div class="clearfix"></div>
                                <div class="col-md-6 col-sm-6 search-col-padding">
                                    <label>Source</label>
                                    <input type="text" name="carclass" id = "source" value="{{$summary['fromwhere']}}"  id="arrival" class="form-control" disabled>                                                                 
                                </div>

                                <div class="col-md-6 col-sm-6 search-col-padding">
                                    <label>Destination</label>
                                    <div class="input-group">
                                        <input type="text" name="destination" id="destination" value="{{$summary['destination']}}" class="form-control" disabled >
                                        <div class="input-group-append">
                                            <span class="input-group-text">
                                                <i class="fa fa-map-marker fa-fw"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-6 search-col-padding">
                                    <label>Car Type/Class</label>
                                    <div class="input-group">
                                        <input type="text" name="carclass" id="carclass" value="{{$summary['carclass']}}" class="form-control" disabled >
                                        <div class="input-group-append">
                                            <span class="input-group-text">
                                                <i class="fa fa-map-marker fa-fw"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>


                                <div class="col-md-6 col-sm-6 col-6 search-col-padding">
                                    <label>YOUR PAYMENT METHOD</label>
                                    <input type="text" name="ptmethod"  id="ptmethod" class="form-control" disabled >   
                                </div>
                                <div class="col-md-6 col-sm-6 search-col-padding">
                                    <label>FARE DETAILS</label>
                                    <div class="input-group">

                                        <input type="text" name="fare" id="fareairport" disabled class="form-control" >
                                        <div class="input-group-append">
                                            <span class="input-group-text">
                                                <i class="fa fa-money fa-fw"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <input type="hidden" name="fromwhere" value="EBB INT AIRPORT">
                                <div class="col-md-12 search-col-padding">
                                    <input type="submit" name="airport_pickup_submit" class="btn btn-theme md-btn text-uppercase mt-2" value="Book">
                                </div>
                                <div class="clearfix"></div>
                            </div>

                        </form>
            </div>
开关(activities.value){
案例“1”:
开关(真){

案例(距离=21)&(距离=31)&(距离=41)&(距离=51)&&(距离)请显示您正在使用的html我已经添加了一个laravel刀片模板的html如果我的答案对您有帮助,您是否愿意接受答案?非常感谢!
 switch (activities.value) {
            case "1":

                switch (true) {
                    case (distance <= 20):
                        //Price
                        document.getElementById('fare').innerHTML = "30000";
                        break;
                    case (distance >= 21) && (distance <= 30):
                        //Price
                        document.getElementById('fare').innerHTML = "70000";
                        break;
                    case (distance >= 31) && (distance <= 40):
                        //Price
                        document.getElementById('fare').innerHTML = "100000";
                        break;
                    case (distance >= 41) && (distance <= 50):
                        //Price
                        document.getElementById('fare').innerHTML = "130000";
                        break;
                    case (distance >= 51) && (distance <= 60):
                        //Price
                        document.getElementById('fare').innerHTML = "160000";
                        break;
                    default:
                        alert("More than 60 KM");
                }
                break;
            case "2":
                //Price2
                switch (true) {
                    case (distance <= 20):
                        //Price
                        document.getElementById('fare').innerHTML = "50000";
                        break;
                    case (distance >= 21) && (distance <= 30):
                        //Price
                        document.getElementById('fare').innerHTML = "100000";
                        break;
                    case (distance >= 31) && (distance <= 40):
                        //Price
                        document.getElementById('fare').innerHTML = "150000";
                        break;
                    case (distance >= 41) && (distance <= 50):
                        //Price
                        document.getElementById('fare').innerHTML = "200000";
                        break;
                    case (distance >= 51) && (distance <= 60):
                        //Price
                        document.getElementById('fare').innerHTML = "200000";
                        break;
                    default:
                        alert("More than 60 KM");
                }
                break;
            case "3":
                switch (true) {
                    case (distance <= 20):
                        //Price
                        document.getElementById('fare').innerHTML = "50000";
                        break;
                    case (distance >= 21) && (distance <= 30):
                        //Price
                        document.getElementById('fare').innerHTML = "100000";
                        break;
                    case (distance >= 31) && (distance <= 40):
                        //Price
                        document.getElementById('fare').innerHTML = "150000";
                        break;
                    case (distance >= 41) && (distance <= 50):
                        //Price
                        document.getElementById('fare').innerHTML = "200000";
                        break;
                    case (distance >= 51) && (distance <= 60):
                        //Price
                        document.getElementById('fare').innerHTML = "200000";
                        break;
                    default:
                       alert("More than 60 KM");
                }
                break;
            case "4":
                switch (true) {
                    case (distance <= 20):
                        //Price
                        document.getElementById('fare').innerHTML = "50000";
                        break;
                    case (distance >= 21) && (distance <= 30):
                        //Price
                        document.getElementById('fare').innerHTML = "100000";
                        break;
                    case (distance >= 31) && (distance <= 40):
                        //Price
                        document.getElementById('fare').innerHTML = "150000";
                        break;
                    case (distance >= 41) && (distance <= 50):
                        //Price
                        document.getElementById('fare').innerHTML = "200000";
                        break;
                    case (distance >= 51) && (distance <= 60):
                        //Price
                        document.getElementById('fare').innerHTML = "200000";
                        break;
                    default:
                        alert("More than 60 KM");
                }
                break;
            case "5":
                switch (true) {
                    case (distance <= 20):
                        //Price
                        document.getElementById('fare').innerHTML = "50000";
                        break;
                    case (distance >= 21) && (distance <= 30):
                        //Price
                        document.getElementById('fare').innerHTML = "100000";
                        break;
                    case (distance >= 31) && (distance <= 40):
                        //Price
                        document.getElementById('fare').innerHTML = "150000";
                        break;
                    case (distance >= 41) && (distance <= 50):
                        //Price
                        document.getElementById('fare').innerHTML = "200000";
                        break;
                    case (distance >= 51) && (distance <= 60):
                        //Price
                        document.getElementById('fare').innerHTML = "200000";
                        break;
                    default:
                        alert("More than 60 KM");
                }
                break;
            case "6":
                switch (true) {
                    case (distance <= 20):
                        //Price
                        document.getElementById('fare').innerHTML = "50000";
                        break;
                    case (distance >= 21) && (distance <= 30):
                        //Price
                        document.getElementById('fare').innerHTML = "100000";
                        break;
                    case (distance >= 31) && (distance <= 40):
                        //Price
                        document.getElementById('fare').innerHTML = "150000";
                        break;
                    case (distance >= 41) && (distance <= 50):
                        //Price
                        document.getElementById('fare').innerHTML = "200000";
                        break;
                    case (distance >= 51) && (distance <= 60):
                        //Price
                        document.getElementById('fare').innerHTML = "200000";
                        break;
                    default:
                        alert("More than 60 KM");
                }
                break;
            case "7":
                switch (true) {
                    case (distance <= 20):
                        //Price
                        document.getElementById('fare').innerHTML = "50000";
                        break;
                    case (distance >= 21) && (distance <= 30):
                        //Price
                        document.getElementById('fare').innerHTML = "100000";
                        break;
                    case (distance >= 31) && (distance <= 40):
                        //Price
                        document.getElementById('fare').innerHTML = "150000";
                        break;
                    case (distance >= 41) && (distance <= 50):
                        //Price
                        document.getElementById('fare').innerHTML = "200000";
                        break;
                    case (distance >= 51) && (distance <= 60):
                        //Price
                        document.getElementById('fare').innerHTML = "200000";
                        break;
                    default:
                        alert("More than 60 KM");
                }
                break;
            default:
                alert("default");
        }
    });