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

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 标签上以选择选项。为了处理每个选项的计算，您可以使用 switch case 来计算每个价格。 这是我为展示这个而创建的 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 标签中放置了一个事件监听器来监听每一次点击。此点击将检查是否已经存在路线 selected:

 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");
        }
    });