WordPress取货距离计价：添加最低40美元费用的实现问题

问题描述 #

我已成功实现Stack Overflow上《How to create pickup Distance Calculation miles pricing in WordPress》问题中的代码，现需添加规则：当计算出的费用低于40美元时，显示最低费用40美元，但尝试多种if-else语句均未成功，附上现有代码，求解决思路。

现有代码 #

document.addEventListener('DOMContentLoaded', function() {
    let map;
    let directionsService;
    let directionsRenderer;

    function initMap() {
        // 初始化Google Maps对象
        directionsService = new google.maps.DirectionsService();
        directionsRenderer = new google.maps.DirectionsRenderer();
        map = new google.maps.Map(document.getElementById('map'), {
            center: { lat: -34.397, lng: 150.644 },
            zoom: 8
        });
        directionsRenderer.setMap(map);
    }

    function calculateDistance() {
        const pickup = document.getElementById('pickup').value;
        const destination = document.getElementById('destination').value;

        if (pickup && destination) {
            const request = {
                origin: pickup,
                destination: destination,
                travelMode: 'DRIVING'
            };

            directionsService.route(request, function(result, status) {
                if (status == 'OK') {
                    directionsRenderer.setDirections(result);

                    const distance = result.routes[0].legs[0].distance.value / 1000; // 距离单位：千米
                    const cost = distance * 2; // 示例：每千米2美元

                    document.getElementById('distance').textContent = distance.toFixed(2) + ' km';
                    document.getElementById('total-cost').textContent = '$' + cost.toFixed(2);
                } else {
                    alert('无法计算距离：' + status);
                }
            });
        } else {
            alert('请填写取货地点和目的地。');
        }
    }

    document.getElementById('calculate-button').addEventListener('click', calculateDistance);

    // 加载地图
    initMap();
});

解决思路与修改方案 #

要实现最低40美元的计费限制，只需在计算出基础费用后，添加逻辑确保最终费用不低于40美元即可，两种简单可行的方案如下：

方案一：使用Math.max()（代码更简洁） #

直接用Math.max()方法取计算出的费用和40中的较大值，替换原有费用计算后的赋值逻辑：

// 替换原有cost相关代码
const distance = result.routes[0].legs[0].distance.value / 1000; // 距离单位：千米
const baseCost = distance * 2; // 示例：每千米2美元
const finalCost = Math.max(baseCost, 40); // 强制最低费用为40美元

document.getElementById('distance').textContent = distance.toFixed(2) + ' km';
document.getElementById('total-cost').textContent = '$' + finalCost.toFixed(2);

方案二：使用if-else语句（逻辑更直观） #

通过条件判断手动设置最终费用：

// 替换原有cost相关代码
const distance = result.routes[0].legs[0].distance.value / 1000; // 距离单位：千米
const baseCost = distance * 2; // 示例：每千米2美元
let finalCost = baseCost;

if (finalCost < 40) {
    finalCost = 40;
}

document.getElementById('distance').textContent = distance.toFixed(2) + ' km';
document.getElementById('total-cost').textContent = '$' + finalCost.toFixed(2);

说明 #

两种方案核心都是在计算基础费用后，对最终费用做最低值限制，只需将原有代码中cost相关的部分替换成上述逻辑即可。

内容的提问来源于stack exchange，提问作者user3918219