如何借助jQuery与Google Map LatLng获取两地公里距离

我需要实现两地之间公里距离的显示，目前地点选择下拉框功能正常，但公里数无法显示，同时需要基于该距离计算价格。相关代码如下：

Google Maps 前端脚本 #

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRBO5tQ2uSfSj0DskoBkXSiSbVCPa-eKM&language=en&libraries=places,geometry&callback=initMap"></script>

<script>
    // 全局存储两地经纬度
    let originCoords, destinationCoords;

    function initMap() {
        pickup = new google.maps.places.Autocomplete(
            document.getElementById('pickup'), {
                componentRestrictions: { 'country': 'qa' }
        });
        pickup.addListener('place_changed', function () {
            const place = pickup.getPlace();
            const title = place.name;
            const lat = place.geometry.location.lat();
            const lng = place.geometry.location.lng();
            // 保存起点经纬度
            originCoords = { lat, lng };

            $.ajax({
                data: { title: title, lat: lat, lng: lng },
                type: 'post',
                success: function (response) {
                    $("#origin").val(response);
                    // 触发距离计算
                    calculateDistance();
                }
            });
        });

        dropup = new google.maps.places.Autocomplete(
            document.getElementById('dropup'), {
                componentRestrictions: { 'country': 'qa' }
        });
        dropup.addListener('place_changed', function () {
            const place = dropup.getPlace();
            const title = place.name;
            const lat = place.geometry.location.lat();
            const lng = place.geometry.location.lng();
            // 保存终点经纬度
            destinationCoords = { lat, lng };

            $.ajax({
                data: { title: title, lat: lat, lng: lng },
                type: 'post',
                success: function (response) {
                    $("#destination").val(response);
                    if ($("#destination").val() == $("#origin").val()) {
                        $('#SameLocError').show();
                        // 清空距离和价格显示
                        document.getElementById('distance-display').textContent = '';
                        document.getElementById('price-display').textContent = '';
                    } else {
                        $('#SameLocError').hide();
                        // 触发距离计算
                        calculateDistance();
                    }
                }
            });
        });
    }

    // 计算距离并更新价格
    function calculateDistance() {
        if (!originCoords || !destinationCoords) return;
        
        // 调用Google Maps几何库计算直线距离（单位：米）
        const distanceInMeters = google.maps.geometry.spherical.computeDistanceBetween(
            new google.maps.LatLng(originCoords.lat, originCoords.lng),
            new google.maps.LatLng(destinationCoords.lat, destinationCoords.lng)
        );
        // 转换为公里并保留两位小数
        const distanceInKm = (distanceInMeters / 1000).toFixed(2);
        // 更新页面距离显示
        document.getElementById('distance-display').textContent = `距离：${distanceInKm} 公里`;
        
        // 按每公里2QAR计算预估价格（可根据需求调整）
        const price = (distanceInKm * 2).toFixed(2);
        document.getElementById('price-display').textContent = `预估价格：${price} QAR`;
    }
</script>

Laravel 前端视图代码 #

<input type="text" id="pickup" name="pickup" class="form-control" />
<input type="text" id="dropup" name="dropup" class="form-control" />
<!-- 隐藏域存储AJAX返回的地点标识 -->
<input type="hidden" id="origin" name="origin" />
<input type="hidden" id="destination" name="destination" />

<!-- 距离和价格显示区域 -->
<div id="distance-display"></div>
<div id="price-display"></div>
<!-- 相同地点错误提示 -->
<div id="SameLocError" style="display:none; color:red;">起点和终点不能相同</div>

关键修复点 #

• 新增全局变量存储两地经纬度，为距离计算提供数据基础
• 添加calculateDistance()函数，利用Google Maps几何库计算直线距离并转换为公里
• 在地点选择完成的AJAX回调中触发距离计算，实时更新页面显示
• 补充相同地点判断时的距离/价格清空逻辑
• 删除冗余的initMap2函数，简化代码结构

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