我认为我参与的项目可能对我来说太过分了，但我认为您可以将我带往正确的方向。
我们正在尝试提供一种表单，用户可以在该表单中输入起点和终点（如Google Maps示例（http://code.google.com/apis/maps/documentation/examples/directions-advanced.html）所示），以便输出地图，其中的路线以及公里数两点之间。
关键是我们需要将这些Km“转换”为$。
我认为这很容易做到，但是我们会有太多变量，例如乘客人数（选择下拉菜单）。
我到底该如何结合呢？我应该编写一种特殊形式，使用一些PHP吗？我在这里迷路了。我该怎么办？
假设1公里= 100 $
而第一个以外的其他每个人都将为该价格增加100美元。
所以20公里2人= 300 $
1-我可以在Google代码中嵌入一些变量吗？
2-要求的形式如何？
非常感谢您的帮助。
谷歌代码
var map;
var gdir;
var geocoder = null;
var addressMarker;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
gdir = new GDirections(map, document.getElementById("directions"));
GEvent.addListener(gdir, "load", onGDirectionsLoad);
GEvent.addListener(gdir, "error", handleErrors);
setDirections("San Francisco", "Mountain View", "en_US");
}
}
function setDirections(fromAddress, toAddress,
语言环境）{
gdir.load（“ from：” + fromAddress +“ to：” + toAddress，
{“ locale”：locale}）;
}
function handleErrors(){
if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
alert("No corresponding geographic location could be found for
指定的地址之一。这个
可能是由于
地址是相对较新的，否则可能
错误。\ n错误代码：“ +
gdir.getStatus（）。code）;
否则（gdir.getStatus（）。code == G_GEO_SERVER_ERROR）
alert（“地理编码或路线请求无法成功
已处理，但确切原因
未知失败。\ n错误
代码：“ + gdir.getStatus（）。code）;
else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
alert("The HTTP q parameter was either missing or had no value. For
地址解析器请求，这意味着
指定了空地址作为输入。
对于路线请求，这意味着
没有在中指定查询
输入。\ n错误代码：“ +
gdir.getStatus（）。code）;
//否则if（gdir.getStatus（）。code
== G_UNAVAILABLE_ADDRESS） Doc错误// // alert（“ The
给定地址或
给定路线查询的路线
由于法律原因无法退货
合同原因。\ n错误代码：“ +
gdir.getStatus（）。code）;
else if (gdir.getStatus().code == G_GEO_BAD_KEY)
alert("The given key is either invalid or does not match the domain
为此。 \ n错误代码：
“ + gdir.getStatus（）。code）;
else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
alert("A directions request could not be successfully parsed.\n
错误代码：“ +
gdir.getStatus（）。code）;
else alert("An unknown error occurred.");
}
函数onGDirectionsLoad（）{
//使用此函数访问有关最新load（）的信息
//结果。
// e.g.
// document.getElementById("getStatus").innerHTML
= gdir.getStatus（）。code; //和yada yada yada ...}
最佳答案
您的完整代码：
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>Distance Calculator</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css">
#map_canvas {
height:500px;
}
</style>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
var start = document.getElementById("start");
var end = document.getElementById("end");
var autocompletePickpUp = new google.maps.places.Autocomplete(start);
var autocompleteDelivery = new google.maps.places.Autocomplete(end);
var uk = new google.maps.LatLng(51.511035, -0.132315);
var myOptions = {
zoom:12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: uk
}
//testing
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
autocompletePickpUp.bindTo('bounds', map);
autocompleteDelivery.bindTo('bounds', map);
}
function calcRoute() {
var startValue =start.value;
var endValue = end.value;
var distanceInput = document.getElementById("distanceKm");
var distanceMl = document.getElementById("distanceMl");
var price = document.getElementById("price");
var request = {
origin:startValue,
destination:endValue,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
distanceInput.value = response.routes[0].legs[0].distance.value / 1000;
distanceMl.value = response.routes[0].legs[0].distance.value * 0.000621371;
price.value = distanceMl.value * 2.50;
}
});
}
</script>
</head>
<body onload="initialize()">
<div>
<p>
<label for="start">Start: </label>
<input type="text" name="start" id="start" />
<label for="end">End: </label>
<input type="text" name="end" id="end" />
<input type="submit" value="Calculate Route" onclick="calcRoute()" />
</p>
<p>
<label for="distanceInKm">Distance (km): </label>
<input type="text" name="distanceKm" id="distanceKm" readonly="true" />
</p>
<p>
<label for="distanceInMiles">Distance (ML): </label>
<input type="text" name="distanceMl" id="distanceMl" readonly="true" />
</p>
<p>
<label for="price">Price: </label>
<input type="text" name="price" id="price" readonly="true" />
</p>
</div>
<div id="map_canvas"></div>
</body>
将其粘贴到html文档中，然后进行测试。
我正在KM中获取值>在Miles中对其进行转换>并以£为价格。
我现在才这样做，这不是100％的功能，但您明白了。
要计算您的乘客，您只需要获取以下内容：
<div class="form-group">
<label>Table</label>
<select class="form-control required" name="kitchen_table" id="kitchen_table">
<option value="" selected>Quantity</option>
<option value="0">0</option>
<option value="10">1</option>
<option value="20">2</option>
<option value="30">3</option>
<option value="40">4</option>
</select>
</div>
<div class="live_quote">
<p>Your total is: <span id="total_quote"></span> </p>
</div>
并获取值进行打印：
$('select').change(function(){
var total = 0;
$('select :selected').each(function() {
total += Number($(this).val());
});
$("#total_quote").html(total);
}）
再次：您可能有一些错误，但这很有趣，您可以从那里得到一个想法和指导。