0

我对此很陌生，问题是当您单击重置时方向面板不会消失以及如何使旅行模式选项起作用。谢谢 HTML 代码

<body onload="initialize()">
    <div id="container">
        <div id="directions">
            <table>
                <tr>
                    <td><b>Start: </td></b>
                    <td>
                        <select id="start">
                            <option value="6.517611, 3.385452">Main Gate</option>
                        </select>
                    </td>
                </tr>
                <tr>
                <td><b>End: </b></td>
                <td>
                    <select id="end" >
                        <option value=""><i>choose from list</i></option>
                        <option value="6.516177, 3.397873">Jaja Hall</option>
                        <option value="6.515228, 3.398034">Chemical Engineering Dept</option>
                        <option value="6.515546, 3.399022">Faculty of Sciences</option>
                    </select>
                </td>
        </tr>
    </table><br />
<td>
    <select id="mode" onchange="updateMode()">
        <option value="bicycling">Bicycling</option>
        <option value="driving">Driving</option>
        <option value="walking">Walking</option>
    </select>
</td>
<input type="button" value="Get Directions" onclick="calcRoute()" />
<input type="button" value="Reset" onclick="reset()" />
</div>
<div id="directionsPanel"></div></div>
<div id="map"></div>
</body>

javascript代码： 

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var latlng = new google.maps.LatLng(6.514885,3.393742);
var mapOptions = {
zoom:16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlng
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var mode;
switch (document.getElementById("mode").value) {
case "bicycling":
mode = google.maps.DirectionsTravelMode.BICYCLING;
break;
case "driving":
mode = google.maps.DirectionsTravelMode.DRIVING;
break;
case "walking":
mode = google.maps.DirectionsTravelMode.WALKING;
break;
}
var request = {
origin:start,
destination:end,
travelMode: mode
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
function updateMode() {
if (directionsVisible) {
calcRoute();
}
}
function clearMarkers() {
directionsDisplay = new google.maps.DirectionsRenderer();
var latlng = new google.maps.LatLng(6.514885,3.393742);
var mapOptions = {
zoom:16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlng
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
end_loc = document.getElementById('end')
end_loc.value = ""
} 
function reset() {
clearMarkers();
directionsDisplay.setMap(null);
directionsDisplay.setPanel(null);
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));    
}
4

1 回答 1

1

@user1704833，重置按钮清除方向面板。那是你要找的吗？

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Directions Simple</title>

    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>
      var directionDisplay;
      var directionsService = new google.maps.DirectionsService();
      var map;

      function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var latlng = new google.maps.LatLng(6.514885,3.393742);
        var mapOptions = {
          zoom:7,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: latlng
        }
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById("directionsPanel"));
      }

      function calcRoute() {
        var start = document.getElementById('start').value;
        var end = document.getElementById('end').value;
        var mode;

        switch ( document.getElementById("mode").value)
        {
          case 'bicycling' :
            mode = google.maps.DirectionsTravelMode.BICYCLING;
            break;
          case 'driving':
            mode = google.maps.DirectionsTravelMode.DRIVING;
            break;
          case 'walking':
            mode = google.maps.DirectionsTravelMode.WALKING;
            break;
        }
        var request = {
            origin:start,
            destination:end,
            travelMode: mode
        };
        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
          }
        });
      }

       function updateMode() {
             calcRoute();
        }

        function clearMarkers() {
          directionsDisplay = new google.maps.DirectionsRenderer();
          var latlng = new google.maps.LatLng(6.517611, 3.385452);
          var mapOptions = {
          zoom:16,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: latlng
        }
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        document.getElementById('end').value = "";
        }

        function reset() {
          //clearMarkers();
          directionsDisplay.setMap(null);
          directionsDisplay.setPanel(null);
          directionsDisplay = new google.maps.DirectionsRenderer();
          directionsDisplay.setMap(map);
          directionsDisplay.setPanel(document.getElementById("directionsPanel")); 

        }
    </script>
  </head>
  <body onload="initialize()">
    <div>
    <b>Start: </b>
    <select id="start">
        <option value="6.517611, 3.385452">Main Gate</option>
    </select>
    <b>End: </b>
    <select id="end" >
        <option value="6.516177, 3.397873">Jaja Hall</option>
        <option value="6.515228, 3.398034">Chemical Engineering Dept</option>
        <option value="6.515546, 3.399022">Faculty of Sciences</option>
    </select>
    <select id="mode" onchange="updateMode()">
            <option value="bicycling">Bicycling</option>
            <option value="driving">Driving</option>
            <option value="walking">Walking</option>
        </select>
    <input type="button" value="Update" onclick="updateMode()" />
    <input type="button" value="Reset" onclick="reset()" />
    </div>
    <div id="directionsPanel" style="width:300px;  position:absolute; margin-left:550px; top:30px;">Direction panel</div>
    <div id="map_canvas" style="width:500px;  height:500px; top:30px;"></div>


  </body>
</html>
于 2012-09-28T08:53:23.583 回答