自行车层在第二次发出并显示路线请求时消失。 Google Maps API 路线

// Create Bedforshire variable
    const bedfordshire = {
        lat: 52.02973,lng: -0.45303
    };
    // Set the map options
    const mapOtions = {
        center: bedfordshire,zoom: 10,// Disable the default map UI,enable the zoom control
        disableDefaultUI: true,zoomControl: true
    };
    // Create the map with the bicycle layer enabled
    const map = new google.maps.Map(document.getElementById('googleMap'),mapOtions);
    const bikeLayer = new google.maps.bicyclingLayer();
    bikeLayer.setMap(map);
    // Create variables for custom legend icons 
    const icons = {
        bike@R_874_9829@ls: {
            name: "Bike lanes & @R_874_9829@ls",icon: "assets/img/icons/bike @R_874_9829@l.png",},bikeFriendlyroads: {
            name: "Bike-friendly roads",icon: "assets/img/icons/bike friendly road.png",};
    // Create the legend and place the icons
    const legend = document.getElementById("legend");

    for (const key in icons) {
        const type = icons[key];
        const name = type.name;
        const icon = type.icon;
        const div = document.createElement("div");
        div.innerHTML = '<img src="' + icon + '"> ' + name;
        legend.appendChild(div);
    }
    // Push the legend to the map
    map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(legend);
    // Create a Directionsservice object to use the route method and get a result for the request
    var directionsservice = new google.maps.Directionsservice();
    // Create a DirectionsRenderer object to create the route
    var directionsDisplay = new google.maps.DirectionsRenderer({
      suppressBicyclingLayer: true
    });
    // Display the directions on the map
    directionsDisplay.setMap(map);
    
    // Define the calcRoute function
    function calcRoute() {
        // Create a route request
        var request = {
            origin: document.getElementById('from').value,desTination: document.getElementById('to').value,travelmode: google.maps.Travelmode.bICYCLING,unitSystem: google.mapS.UnitSystem.IMPERIAL
        }
        // Pass the request to the .route method
        directionsservice.route(request,function (result,status) {
            if (status == google.maps.DirectionsStatus.OK) {
                // Get the route distance and time and pass to the #output div
                const output = document.querySELEctor('#output');
                output.innerHTML = '<div class="alert-info">From: ' + document.getElementById('from').value + '.<br />To: ' + document.getElementById('to').value + '.<br /> Cycling distance <i class="fas fa-biking"></i> : ' + result.routes[0].legs[0].distance.text + '.<br />Duration <i class="fas fa-stopwatch"></i> : ' + result.routes[0].legs[0].duration.text + '.</div>';
                // Display the route
                directionsDisplay.setDirections(result);

            } else {
                // delete the route
                directionsDisplay.setDirections({
                    routes: []
                });
                // Recenter the map on Bedfordshire
                map.setCenter(bedfordshirE);
                // Show an error message if the route is not possible
                output.innerHTML = '<div class="alert-danger"><i class="fas fa-exclamation-triangle"></i> This route is not possible on a bicycle!</div>';
            }
        });
    }
    // Create searchBox1 object for the starTing place
    var input1 = document.getElementById('from');
    var searchBox1 = new google.maps.places.SearchBox(input1);
    // Bias the SearchBox1 results toWARDs current map's viewport
    map.addListener('bounds_changed',() => {
        searchBox1.setBounds(map.getBounds());
    });
    // Create searchBox2 object for the desTination
    var input2 = document.getElementById('to');
    var searchBox2 = new google.maps.places.SearchBox(input2);
    // Bias the SearchBox2 results toWARDs current map's viewport
    map.addListener('bounds_changed',() => {
        searchBox2.setBounds(map.getBounds());
    });

/* Form placeholder text */
    #from {
        font-size: 0.8em;
    }

    #to {
        font-size: 0.8em;
    }
    /* Size the map and apply box-shadow */
    #googleMap {
        width: 85vw;
        height: 50vh;
        margin: 12px auto;
        border: 1px solid black;
        border-radius: 2% 2% 2% 2%;
       }
    /* Style the map legend */
    #legend {
        font-family: Arial,sans-serif;
        BACkground: #fff;
        BACkground-color: lightgray;
        padding: 4px;
        margin: 4px;
        border: 1px solid black;
        border-radius: 2% 2% 2% 2%;
        }

    #legend img {
        vertical-align: middle;
    }
    /* Style the alert box containing the route details */
    .alert-info {
        margin: auto;
        max-width: fit-content;
        text-align: center;
        font-size: 0.8em;
        BACkground-color: #efefef;
        }

<!DOCTYPE html>
    <html lang="en-us">

    <head>
        <meta name="viewport" content="initial-scale=1.0">
<form>
    <label for="from" class="control-label direction-input"></label>
        <input type="text" id="from" placeholder="StarTing place" class="form-control" value="Milton Keynes">
    <label for="to" class="control-label direction-input"></label>
         <input type="text" id="to" placeholder="DesTination" class="form-control" value="Newport Pagnell">
</form>
     <button onclick="calcRoute();">Show Route </button>
        <div id="map-container">
          <div id="googleMap"></div>
            <div id="legend">
           </div>
         </div>
            <div id="output">
         </div>
        </div> 
        <!-- Google Maps API -->
        <script
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callBACk&libraries=places">
        </script>
        <!-- Enables drawing of the bicycle layer on the map -->
        <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
        <!-- JavaScript -->
        <script src="assets/js/routes.js"></script>

    </body>

    </html>