使用Leaflet.js实现实时路由更新时，如何阻止标记重复创建？

你的问题核心是每次用户位置更新时，都会新建一个L.Routing.control并添加到地图，导致路由线路重复叠加。解决思路和你处理marker、circle的逻辑一致：用变量存储路由控件实例，更新前先移除旧控件，再创建新的（或直接更新途经点）。

具体修改步骤： #

1. 在全局变量区添加路由控件的声明：

let marker, circle, zoomed, routingControl; // 新增routingControl变量

2. 修改success函数中创建路由的代码块，先移除旧控件再创建新的：

if (lng_client != null && lat_client != null && accuracy_client != null) {
    // 先移除已存在的路由控件
    if (routingControl) {
        map.removeControl(routingControl);
    }
    // 创建新的路由控件并赋值给变量
    routingControl = L.Routing.control({
        waypoints: [
            L.latLng(lat, lng), // 用户当前位置
            L.latLng(lat_client, lng_client) // 目的地
        ]
    }).addTo(map);
}

更高效的优化方案（可选） #

如果不想每次都销毁重建控件，可以直接更新现有路由控件的途经点，性能更好：

if (lng_client != null && lat_client != null && accuracy_client != null) {
    if (routingControl) {
        // 直接更新途经点，无需销毁重建
        routingControl.setWaypoints([
            L.latLng(lat, lng),
            L.latLng(lat_client, lng_client)
        ]);
    } else {
        // 首次创建路由控件
        routingControl = L.Routing.control({
            waypoints: [
                L.latLng(lat, lng),
                L.latLng(lat_client, lng_client)
            ]
        }).addTo(map);
    }
}

修改后的完整代码（关键部分已标注） #

$(document).ready(function() {
    var map = L.map('map');
    map.setView([51.505, -0.09], 13);

    // 获取地图瓦片
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);

    // 地理定位
    navigator.geolocation.watchPosition(success, error);
    navigator.geolocation.getCurrentPosition(get);

    // 新增routingControl变量
    let marker, circle, zoomed, routingControl;

    function success(pos) {
        const lat = pos.coords.latitude;
        const lng = pos.coords.longitude;
        const accuracy = pos.coords.accuracy;
        const getFixedPosition = $(".getfixed");

        if (marker) {
            map.removeLayer(marker);
            map.removeLayer(circle);
        }

        marker = L.marker([lat, lng], {
            title: "Votre Position actuelle",
            // icon: customIcon
        }).bindPopup("<h3>Votre position</h3>").addTo(map);

        circle = L.circle([lat, lng], {
            radius: accuracy
        }).addTo(map);

        if (!zoomed) {
            zoomed = map.fitBounds(circle.getBounds());
        }

        map.setView([lat, lng]);
        $("#displayLong").val(lng);
        $("#displayLat").val(lat);
        $("#displayAccu").val(accuracy);

        const lng_client = $("#displayLongClient").val();
        const lat_client = $("#displayLatClient").val();
        const accuracy_client = $("#displayAccuClient").val();

        var justToday = new Date();
        var getjustToday = justToday.toLocaleString();

        // 修改后的路由创建逻辑
        if (lng_client != null && lat_client != null && accuracy_client != null) {
            if (routingControl) {
                map.removeControl(routingControl);
                // 或者用优化方案：routingControl.setWaypoints([...])
            }
            routingControl = L.Routing.control({
                waypoints: [
                    L.latLng(lat, lng), //position of the user
                    L.latLng(lat_client, lng_client) //arrival point
                ]
            }).addTo(map);
        }

    }


    function get(current_position) {
        $('.myPosition input[name="inputLat"]').val(current_position.coords.latitude);
        $('.myPosition input[name="inputLong"]').val(current_position.coords.longitude);
        $('.myPosition input[name="inputAccu"]').val(current_position.coords.accuracy);
    }

    function error(err) {
        if (err.code === 1) {
            alert("activez la geolocalisation s'il vous plait");
        }
    }
});

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