Question

使用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>

使用Google Maps API添加/删除折线，使用javascript无法正常工作

0 个答案: