您可以尝试首先计算并显示路线，然后将侦听器置于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);
        }
    });
}

我在选择标记中放置了一个事件监听器，以监听每次点击。此点击将检查是否已经选择了一条路线：

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