添加/删除折线使用谷歌地图API使用javascript不工作

Add/Remove polylines using Google Maps API using javascript not working

本文关键字：使用 API javascript 工作谷歌地图删除折线添加更新时间：2023-09-26

javascript Google maps API有一些问题，特别是多线段。

我已经实现了代码来镜像https://developers.google.com/maps/documentation/javascript/examples/polyline-remove的onclick方法，但是该行没有加载，无论是最初(根据需要)，还是当onclick提示提示时。

我希望这是清楚的，提前感谢。

  </head>
  <body>
 <div id="map" style=
"float:left;width:100%;height:100%;max-width:650px;max-height:500px;margin-left:auto;margin-right:auto;margin-bottom:10px;">
</div>
<div class="panel" id="control_panel" style="width:500px; text-align:left;">
    <div class="panel" style="margin:20px;border-width:2px;">
        <br>
        <b>Start:</b><br>
        <input id="start" type="text" value="Whitechapel"><br>
        <br>
        <b>Please Select Route:</b> 
<!-- Select section that should affect whether polyline is showing or not -->
<select id="waypoints" multiple required>
            <option id="viaRoute" onclick="removeOsterley();"
            value="Direct to event">
                Direct to venue
            </option>
            <option class="waypointoption" id="viaRoute" onclick=
            "removeOsterley();" value="Richmond Shuttle">
                Richmond Bus
            </option>
            <option class="waypointoption" id="viaRoute" onclick=
            "addOsterley();" value="Osterley Shuttle">
                Osterley Bus
            </option>
        </select>
    </div>
</div>


    <script>

function initMap() {
    var directionsService = new google.maps.DirectionsService();
    var directionsDisplay = new google.maps.DirectionsRenderer();
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 11,
        center: {
            lat: 51.479242,
            lng: -0.315963
        }
    });
    var richmondImage = 'http://i.imgur.com/oYhtBE0.png';
    var richmondMarker = new google.maps.Marker({
    position: {lat: 51.463243, lng: -0.301353},
    map: map,
    icon: richmondImage
    });
    var osterleyImage = 'http://i.imgur.com/oYhtBE0.png';
    var osterleyMarker = new google.maps.Marker({
    position: {lat: 51.481184, lng: -0.352407},
    map: map,
    icon: osterleyImage
    });
    var marker = new google.maps.Marker({
    position: {lat: 51.479242, lng: -0.315963},
    map: map,
    title: 'Syon Park Hilton Hotel'
    });

    directionsDisplay.setMap(map);
    document.getElementById('waypoints').addEventListener('click', function () {
        calculateAndDisplayRoute(directionsService, directionsDisplay);
    });
    // Polyline locations   
    var osterleyPath = [
          {lat:51.481337, lng: -0.352286},
          {lat:51.480669, lng: -0.351814},
          {lat:51.482139, lng: -0.344475},
          {lat:51.482626, lng: -0.336793},
          {lat:51.481397, lng: -0.336085},
          {lat:51.480609, lng: -0.335892},
          {lat:51.478965, lng: -0.334733},
          {lat:51.477521, lng: -0.333467},
          {lat:51.476706, lng: -0.332609},
          {lat:51.476105, lng: -0.331858},
          {lat:51.480368, lng: -0.317718},
          {lat:51.480408, lng: -0.317718},
          {lat:51.479580, lng: -0.317009},
          {lat:51.479304, lng: -0.316736},
          {lat:51.479090, lng: -0.316092},
          {lat:51.479291, lng: -0.316012},
          {lat:51.479357, lng: -0.315754},
          {lat:51.479371, lng: -0.315497}
            ];
    var osterleyBus = new google.maps.Polyline({
    path: osterleyPath,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
     });    
     //Should prompt polyline to load when map does
     addOsterley();
}

 // adds Shuttle Bus to map - onclick function in HTML
         function addOsterley() {
      osterleyBus.setMap(map);
    }
// removes Shuttle Bus to map - onclick function in HTML
    function removeOsterley() {
      osterleyBus.setMap(null);
    }

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"
        async defer></script>

osterleyBus和map是局部变量，在initMap范围内可见，目前在removeOsterley/addOsterley范围内不可见。

在initMap的末尾创建两个函数，然后osterleyBus和map将在函数中可见

function initMap() {
    /* your code */
    var osterleyBus = new google.maps.Polyline({
    path: osterleyPath,
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 2
     });    

    window.addOsterley=function() {
      osterleyBus.setMap(map);
    }
    window.removeOsterley=function() {
      osterleyBus.setMap(null);
    }
    addOsterley();
}