使用Google地圖獲取路線問題

我在這方面很新穎，問題是路線面板在您點擊重置時不會消失，並且如何獲取行駛模式選項才能運行。謝謝 HTML代碼使用Google地圖獲取路線問題

<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"));  
}

來源

2012-09-28 user1704833

你得到的錯誤是什麼。 – defau1t

我沒有設置任何錯誤警報，但無論如何，我終於得到了模式選項的工作，問題是當你點擊重置按鈕一切重置，但一步一步的方向面板仍然存在，它應該消失.. – user1704833

嘗試評論reset（）中的clearMakers（）函數。 – thomasbabuj

@ 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-28 08:53:23 thomasbabuj

明白了。它的工作現在很好。非常感謝 – user1704833

使用Google地圖獲取路線問題

回答

相關問題