是否可以刷新路径段中的值计算？

Question

我想在组合框中输入值后刷新路由段。刷新计算。

HTML

<div id="map"></div>
<div id="right-panel">
  <select id="lorrytype">
<option name="1"value="1.6">1</option>
<option name="2"value="2.6">2</option>
<option name="3"value="3.6">3</option>
</select>
<div>
<b>Start:</b><br>
<input id="start"  placeholder="Start point" type="text" class="form-control">
<br>
<b>Waypoints:</b> <br>
<input id="waypoints" class="waypoints" placeholder="Waypoint" type="text" class="form-control">
<input id="waypoints1" class="waypoints" placeholder="Waypoint" type="text" class="form-control">
<br>
<b>End:</b><br>
<input id="end"  placeholder="End point" type="text" class="form-control">
<br>

</div>
<div id="directions-panel"></div>
</div>

Javascript

      function(response, status) {
        if (status === 'OK') {
          me.directionsRenderer.setDirections(response);
          var route = response.routes[0];
          var summaryPanel = document.getElementById('directions-panel');


          summaryPanel.innerHTML = '';
      // For each route, display summary information.
      for (var i = 0; i < route.legs.length; i++) {
        var lorrytype = document.getElementById('lorrytype').value;
        var routeSegment = i + 1;
        //calculate the one way price using the klms
        var kms = route.legs[i].distance.value/1000;
        var price_1 = (kms > 0) ? 3 : 0; kms =  (kms > 0)? kms - 1 :  0;
        var price_2 = (kms - 14) > 0 ? (14 * 1.60) : (kms * lorrytype); kms = (kms-14)>0 ? kms - 14 : 0;
        var price_3 = (kms - 15) > 0 ? (15 * 1.40) : (kms * lorrytype); kms = (kms-15)>0 ? kms - 15 : 0;
        var price_4 = (kms > 0) ? (kms * lorrytype) : 0;
        var total = price_1 + price_2 + price_3 + price_4;
        var totaldecimal = total.toFixed(2);

        summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment +
            '</b><br>';
        summaryPanel.innerHTML += route.legs[i].start_address + '<br> to <br>';
        summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
        summaryPanel.innerHTML += route.legs[i].duration.text + '<br>';
        summaryPanel.innerHTML += "the one way price is: RM " + totaldecimal + "<br>";
        summaryPanel.innerHTML += "lorry price" + lorrytype + "<br>";
        summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
        console.log();


      }

        } else {
          window.alert('Directions request failed due to ' + status);
        }
      });
};

示例：如果我们更改组合框中的值，则计算不会刷新，我必须重新输入目标地址才能刷新。

Answer 1

您可以先尝试计算并显示路线，然后将侦听器置于select标签中以选择选项。要处理每个选项的计算，然后可以使用切换案例来计算每个价格。这是我创建的用于显示此内容的code。

这里是每个功能的细分：

我首先使用按钮来计算路线：

    document.getElementById('submit').addEventListener('click', function() {
        calculateAndDisplayRoute(directionsService, directionsRenderer, map);
    });

它将在地图上显示结果以及在文本面板中显示详细信息的地方调用此函数：

    var start = document.getElementById('start').value;
    var end = document.getElementById('end').value;
    //resetting the values of the Select box and the price everytime you are finding a new route
    document.getElementById('price').innerHTML = "";
    document.getElementById("lorryType").selectedIndex = 0;

    directionsService.route({
        origin: start,
        destination: end,
        travelMode: 'DRIVING'
    }, function(response, status) {
        if (status === 'OK') {
            directionsRenderer.setDirections(response);
            //setting values
            document.getElementById('from').innerHTML = document.getElementById('start').value;
            document.getElementById('to').innerHTML = document.getElementById('end').value;
            document.getElementById('time').innerHTML = response.routes[0].legs[0].duration.text
            kms = response.routes[0].legs[0].distance.value / 1000;
            document.getElementById('distance').innerHTML = kms;
            console.log(response.routes[0].legs[0].distance.value / 1000);
        } else {
            window.alert('Directions request failed due to ' + status);
        }
    });
}

我将事件监听器放在select标签中，以监听每次点击。单击此按钮将检查是否已选择路线：

 var activities = document.getElementById("lorryType");
//this is listening everytime you click the selectbox without getting a route first it will show an alert
    activities.addEventListener("click", function() {
        if (document.getElementById('distance').innerHTML == "") {
            alert("Get Route First!")
        }
        console.log("test" + activities.value);
    });

还有一个事件侦听器，用于检测select标签中的每个更改，以便每个更改将为您在select标签中选择的价格计算不同的值：

activities.addEventListener("change", function() {
        var kmsValue = document.getElementById('distance').innerHTML;
        var lorrytype = activities.value;
       //You can change the value or the formula on how you are calculating the price.
       switch (activities.value) {
            case "":
             //Price1
                price_1 = (kmsValue > 0) ? kmsValue - 1 : 0;
                totaldecimal = price_1.toFixed(2);
                document.getElementById('price').innerHTML = totaldecimal;
                break;
            case "1.6":
            //Price2
                price_1 = (kmsValue - 14) > 0 ? (14 * 1.60) : (kmsValue * lorrytype); kmsValue = (kmsValue-14)>0 ? kmsValue - 14 : 0;
                totaldecimal = price_1.toFixed(2);
                document.getElementById('price').innerHTML = totaldecimal;
                break;
            case "2.6":
            //Price3
                price_1 = (kmsValue - 15) > 0 ? (15 * 1.40) : (kmsValue * lorrytype); kmsValue = (kmsValue-15)>0 ? kmsValue - 15 : 0;
                totaldecimal = price_1.toFixed(2);
                document.getElementById('price').innerHTML = totaldecimal;
                break;
            case "3.6":
            //Price4
                price_1 = (kmsValue > 0) ? (kmsValue * lorrytype) : 0;
                totaldecimal = price_1.toFixed(2);
                document.getElementById('price').innerHTML = totaldecimal;
                break;
            default:
                alert("default");
        }
    });