Question

我对此很新，问题是点击重置时方向面板不会消失，如何让旅行模式选项运行。谢谢 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"));    
}

Answer 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>

获取Google地图的路线问题

1 个答案: