我需要将两个地址传递给以下代码，以根据所选的交通方式显示它们之间的方向。一旦用户从第 1 页的下拉框中选择了两个城市，我将把它们发送到代码(第 2 页)以显示它们的位置和它们之间的方向。
我已经复制了这个sample code来自谷歌。我现在正尝试将它与我的代码结合起来，但不知道如何。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Travel modes in directions</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<style type="text/css">
html, body {
height: 50%;
margin: 0;
padding: 0;
}
#map-canvas {
height: 200%;
width:25%;
}
@media print {
html, body {
height: auto;
}
#map-canvas {
height: 650px;
}
}
</style>
<script>
function GetLocation(add) {
var geocoder = new google.maps.Geocoder();
var address = add;
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
var output = latitude + "," + longitude;
return output;
} else {
alert("Request failed.")
}
});
};
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var haight = new google.maps.LatLng(-37.81411, 144.96327999999999);
var oceanBeach = new google.maps.LatLng(-37.814107, 144.96327999999994);
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: haight
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
var selectedMode = document.getElementById('mode').value;
var request = {
origin: haight,
destination: oceanBeach,
// Note that Javascript allows us to access the constant
// using square brackets and a string value as its
// "property."
travelMode: google.maps.TravelMode[selectedMode]
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="panel">
<b>Mode of Travel: </b>
<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>
<script>GetLocation("Los Angeles, USA");</script>
<script>GetLocation("Las Vegas, USA");</script>
</div>
<div id="map-canvas"></div>
</body>
</html>
最佳答案
您实际上是在询问 SearchBox .你不需要它。您可以直接获取表单并获取提交的值并对其进行地理编码以在上述脚本中传递。
关于javascript - 需要给谷歌地图地址来显示方向，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18067984/