Google地圖行車路線：替換javascript值？

某處計算器，我發現這個（稍微修改由我）從谷歌地圖渲染基本的駕駛指示：Google地圖行車路線：替換javascript值？

<!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是真的不好 - 我怎麼更新這個在頂部有兩個文本框要求origin和destination，也許兩個電臺框讓我選擇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>

來源

2012-12-17 Christian

只是因爲我發現這個有趣的：閱讀1006次，爲我贏得了「熱門問題」徽章 - 零票;） – Christian

見下面的標記和代碼這需要從文本框中輸入，也將行駛模式從dropdownbox-

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-18 06:23:32 Cdeez

謝謝！其他人，futre等等：對於完整的複製和粘貼的HTML見上文。 – Christian

Google地圖行車路線：替換javascript值？

回答

相關問題