0

stackoverflow のどこかで、Google マップからの基本的な運転指示をレンダリングするためにこれを見つけました (私が少し変更しました)。

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps API v3 Directions Example</title> 
   <script type="text/javascript" 
           src="http://maps.google.com/maps/api/js?sensor=false&language=de"></script>
</head> 
<body style="font-family: Arial; font-size: 12px;"> 
   <div style="width: 600px;">
     <div id="map" style="width: 500px; height: 400px; float: left;"></div> 
     <div id="panel" style="width: 500px; float: left;"></div> 
   </div>

   <script type="text/javascript"> 

     var directionsService = new google.maps.DirectionsService();
     var directionsDisplay = new google.maps.DirectionsRenderer();

     var map = new google.maps.Map(document.getElementById('map'), {
       zoom:7,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     });

     directionsDisplay.setMap(map);
     directionsDisplay.setPanel(document.getElementById('panel'));

     var request = {
       origin: 'An der Alster 1, Hamburg', 
       destination: 'Albada 1, Cala Llombards, Mallorca',
       travelMode: google.maps.DirectionsTravelMode.DRIVING
     };

     directionsService.route(request, function(response, status) {
       if (status == google.maps.DirectionsStatus.OK) {
         directionsDisplay.setDirections(response);
       }
     });
   </script> 
</body> 
</html>

私のKindle画面に合うように例を少し修正しました - 今、私のJavaScriptは本当に悪いので - これを更新して、とを尋ねる2つのテキストボックスoriginとdestination、おそらく2つのラジオボックスを選択させるようにするにはどうすればよいですか? travelMode(DRIVINGおよび)の値WALKING?

ありがとう！

完全なコピー アンド ペーストの回答:

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps API v3 Directions Example</title> 
   <script type="text/javascript" 
           src="http://maps.google.com/maps/api/js?sensor=false&language=de"></script>
</head> 
<body style="font-family: Arial; font-size: 12px;"> 

Start:<input type="text" id="start"><br>
Ende: <input type="text" id="end"><br>
<div>
<select id="mode" onchange="calcRoute();">
  <option value="DRIVING">Auto</option>
  <option value="WALKING">zu Fuß</option>
</select><br>
<input type="button" value="Los" onclick="calcRoute();">
</div>
<br>

   <div style="width: 600px;">
     <div id="map" style="width: 400px; height: 400px; float: left;"></div> 
     <div id="panel" style="width: 400px; float: left;"></div> 
   </div>


   <script type="text/javascript"> 

     var directionsService = new google.maps.DirectionsService();
     var directionsDisplay = new google.maps.DirectionsRenderer();

     var map = new google.maps.Map(document.getElementById('map'), {
       zoom:7,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     });

     directionsDisplay.setMap(map);
     directionsDisplay.setPanel(document.getElementById('panel'));

     var request = {
       origin: '', 
       destination: '',
       travelMode: google.maps.DirectionsTravelMode.DRIVING
     };

     directionsService.route(request, function(response, status) {
       if (status == google.maps.DirectionsStatus.OK) {
         directionsDisplay.setDirections(response);
       }
     });

     function calcRoute() {
  var selectedMode = document.getElementById("mode").value;
  var start = document.getElementById("start").value;
  var end = document.getElementById("end").value;
  var request = {
    origin:start,
    destination:end,
    travelMode: google.maps.TravelMode[selectedMode]
  };
  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
    }
  });
}
   </script> 
</body> 
</html>
4

1 に答える 1

1

以下のマークアップと、テキスト ボックスからの入力とドロップダウン ボックスからの移動モードを取得するコードを参照してください。

HTML-

Start:<input type="text" id="start">
End:<input type="text" id="end">
<div>
<strong>Mode of Travel: </strong>
<select id="mode" onchange="calcRoute();">
  <option value="DRIVING">Driving</option>
  <option value="WALKING">Walking</option>
  <option value="BICYCLING">Bicycling</option>
  <option value="TRANSIT">Transit</option>
</select>
</div>

Javascript-

function calcRoute() {
  var selectedMode = document.getElementById("mode").value;
  var start = document.getElementById("start").value;
  var end = document.getElementById("end").value;
  var request = {
    origin:start,
    destination:end,
    travelMode: google.maps.TravelMode[selectedMode]
  };
  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
    }
  });
}
于 2012-12-18T06:23:32.433 に答える