行程变更时如何清除Google Maps中的旧Polyline？

问题根源 #

你遇到的问题是因为每次生成备选路线时，都会创建新的DirectionsRenderer实例，但没有保存这些实例的引用，导致旧的路线无法被清除。此外，你尝试调用的polyline.remove()无效，因为polyline变量指向的是路由对象而非Google Maps的Polyline实例，且该变量在事件监听器的作用域中不存在。

解决方案 #

我们需要维护一个全局数组来存储所有DirectionsRenderer实例，每次更新路线前先清除所有旧实例，再创建新的路线渲染器。

修改后的完整代码 #

<div id="formulaire" class="box">
    <input id="start" type="text" value="$4DTEXT($vo_personne.origine)" class="input my-1">
    <input id="end" type="text" value="$4DTEXT($vo_personne.destination)" class="input my-1">
    
    <div class="select my-1">
        <select id="mode_transport">
            <option value="DRIVING">Voiture</option>
            <option value="TRANSIT">Transports</option>
        </select>
    </div>
    
    <input type="submit" value="Actualiser le trajet" class="button my-1">
</div>

<script>
// 全局变量：存储所有路线渲染器实例
let directionRenderers = [];

// onglets jquery UI
$( function() {
    $( "#tabs" ).tabs();
} );

// Google Maps
function initMap() {
    directionsRenderer = new google.maps.DirectionsRenderer({
        polylineOptions : {
            strokeColor: '#0047b3',
            strokeOpacity: 1.0,
            strokeWeight: 7
        }
    });
    
    directionsService = new google.maps.DirectionsService();
    
    map = new google.maps.Map(document.getElementById("carte"), {
        zoom: 5,  
        center: { lat : 46.603354, lng: 1.888334}, // france
    });

    calculateAndDisplayRoute(directionsService, directionsRenderer);

    // 事件监听器（无需polyline.remove()）
    document.getElementById("mode_transport").addEventListener("change", () => {
        calculateAndDisplayRoute(directionsService, directionsRenderer);
    }); 
    document.getElementById("start").addEventListener("change", () => {
        calculateAndDisplayRoute(directionsService, directionsRenderer);
    }); 
    document.getElementById("end").addEventListener("change", () => {
        calculateAndDisplayRoute(directionsService, directionsRenderer);
    });
}

function calculateAndDisplayRoute(directionsService, directionsRenderer) {
    start = document.getElementById("start").value;
    end = document.getElementById("end").value; 
    selectedMode = document.getElementById("mode_transport").value;

    directionsRequest = {
        origin: start,
        destination: end,
        travelMode: google.maps.TravelMode[selectedMode],
        provideRouteAlternatives: true,
        optimizeWaypoints: true,
    };

    directionsService
        .route(directionsRequest)
        .then((response) => {
            // 清除所有旧路线
            directionRenderers.forEach(renderer => renderer.setMap(null));
            directionRenderers = [];

            // 配置主路线渲染器
            directionsRenderer.setDirections(response);
            directionsRenderer.setMap(map);
            directionsRenderer.setPanel(document.getElementById("itineraire"));
            directionRenderers.push(directionsRenderer);
            
            // 添加备选路线渲染器（跳过主路线）
            for (var i = 1, len = response.routes.length; i < len; i++) {
                const altRenderer = new google.maps.DirectionsRenderer({
                    map: map,
                    directions: response,
                    routeIndex: i,
                    // 备选路线使用不同样式区分
                    polylineOptions: {
                        strokeColor: '#ff0000',
                        strokeOpacity: 0.7,
                        strokeWeight: 5
                    }
                });
                directionRenderers.push(altRenderer);
            }
        })
        .catch((e) => window.alert("Directions request failed due to " + e));
}

// création de la carte à l'ouverture de la page
window.initMap = initMap;
</script>

关键说明 #

• 清除旧路线：通过遍历directionRenderers数组，调用setMap(null)将旧路线从地图上移除，然后清空数组。
• 保存新实例：将主路线和备选路线的渲染器都添加到数组中，以便下次更新时可以清除。
• 样式区分：给备选路线设置不同的线条样式，方便用户区分主路线和备选路线。
• 避免冗余：循环从i=1开始，跳过主路线（已由主渲染器处理），避免重复渲染。

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