问题
I want to have a taxi fare calculation in my website.
I have the following requirements:
If Google Distance Matrix calculation show following distance kilometers, the rate should go like this:
- From 0 -10km = $65 (fixed price) + 11%
- 10km = $70 + 11%
- 15km = $80 + 11%
- 20km = $90 + 11%
- 25km = $100 + 11%
- 30km = $120 + 11%
- 30km above = $4 / km
I put rate as $2 per km from 10 km above till 30km + $50 extra which result :
if taxi if drived for
- 20km = 20km × $2 + $50 = $90 + 11%
- 21km = 21km × $2 + $50 = $92 + 11%
- 22km = 22km × $2 + $50 = $94 + 11% and so on
but i am dont know to calculate the fixed price of $65 which is the fix rate for below 10 km distance and $120 rate for 30 km and 30km above ie $4/km .
the script i used for Google Distance Matrix is to show $2/km + $50 fix : (I have not added 11% in this script)
<script src="http://maps.google.com/maps?file=api&v=2&key=_MY_API_KEY"
type="text/javascript"></script>
<?php
$rate=2;
$extra=50;
?>
<script type="text/javascript">
var geocoder, location1, location2, gDir;
var map;
var gdir;
var geocoder = null;
var addressMarker;
var directionsPanel;
var directions;
function initialize() {
geocoder = new GClientGeocoder();
gDir = new GDirections();
GEvent.addListener(gDir, "load", function() {
var drivingDistanceMiles = gDir.getDistance().meters / 1000;
var drivingDistanceround =
Math.round(drivingDistanceMiles*100)/100;
var cost = ((drivingDistanceMiles * <?php echo $rate; ?>) + (<?php
echo $extra; ?>))
<?php echo $rate; ?>) + (<?php echo
$extra; ?>))
};
*/
var fare=cost;
var fare = Math.round(fare*100)/100;
document.getElementById('results').innerHTML = '<table
width="100%" style="border-collapse:collapse; padding-top:3px;"><tr><td rowspan="2"
width="35"><img src="images/rates.png"></td><td><strong>Distance: </strong>' +
drivingDistanceround + ' Kilemeters</td></tr><tr><td><strong>Estimated Cost:
</strong>$ ' + fare + '</td></tr></table>';
});
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(-33.722626, 150.810585), 10);
gdir = new GDirections(map, document.getElementById("directions"));
GEvent.addListener(gdir, "load", onGDimrectionsLoad);
GEvent.addListener(gdir, "error", handleErrors);
}
}
function setDirections(fromAddress, toAddress, locale) {
gdir.load("from: " + fromAddress + " to: " + toAddress);
}
function showLocation() {
geocoder.getLocations(document.forms[0].from.value, function (response) {
if (!response || response.Status.code != 200)
{
alert("Sorry, we were unable to geocode the first
address");
}
else
{
location1 = {lat:
response.Placemark[0].Point.coordinates[1], lon:
response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
geocoder.getLocations(document.forms[0].to.value, function
(response) {
if (!response || response.Status.code != 200)
{
alert("Sorry, we were unable to geocode
the second address");
}
else
{
location2 = {lat:
response.Placemark[0].Point.coordinates[1], lon:
response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
gDir.load('from: ' + location1.address + '
to: ' + location2.address);
}
});
}
});
///////////////////////////////////////////////////////////
var directionsPanel;
var directions;
directionsPanel = document.getElementById("route");
directions = new GDirections(map, directionsPanel);
directions.load("from: "+document.forms[0].from.value+" to:
"+document.forms[0].to.value);
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<table width="915" border="2" cellpadding="0" cellspacing="0" bordercolor="#FF9F0F"
style="border-collapse:collapse">
<tr>
<td bgcolor="#FFFF99" style="padding:10px;"><table width="905" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td><div id="map_canvas" style="width: 914px; height: 480px; border: solid 1px
#336699"></div></td>
</tr>
<tr>
<td><div id="form" style="width: 904px; text-align:center; border: solid 1px
#336699; background:#d1e1e4;">
<form action="#" onsubmit="document.getElementById('route').innerHTML='';
showLocation(); setDirections(this.from.value, this.to.value); return false;">
<p style="font-family:Tahoma; font-size:8pt;">From:
<input id="fromAddress" type="text" onblur="if(this.value=='')
this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)
this.value='';" value="Street Name City, State" maxlength="50" size="26" name="from"
style="font-family:Tahoma; font-size:8pt;" />
To:
<input id="toAddress" type="text" onblur="if(this.value=='')
this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)
this.value='';" value="Street Name City, State" maxlength="50" size="26" name="to"
style="font-family:Tahoma; font-size:8pt;"/>
<input class="submit" name="submit" type="submit" value="Calculate"
style="font-family:Tahoma; font-size:8pt;" />
</p>
<div id="results" style="font-family:Tahoma; font-size:8pt; text-align:left;
padding-left:5px; padding-bottom:5px;"></div>
<div id="route" style="font-family:Tahoma; font-size:8pt; text-align:left;
padding-left:5px; padding-bottom:5px;"></div>
</form>
</div></td>
</tr>
</table></td>
</tr>
</table>
</body>
回答1:
I would like to suggest you to go for Google Maps API V3, here is my tested script as per your requirement, and as per your earlier script, I would suggest to go for @Pierre-Francoys Brousse script for rates,
<?php
session_start();
$rate = 2;
$extra = 50;
$fix = 65;
$above = 110;
$next=55;
$min=3;
$cons = 4;
//}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Taxi Fare Calculation using PHP with GOOGLE MAPS API V3</title>
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px;
font-family:tahoma;
font-size:8pt;
}
#total {
font-size:large;
text-align:center;
font-family:Georgia, “Times New Roman”, Times, serif;
color:#990000;
margin:5px 0 10px 0;
font-size:12px;
width:374px;
}
input {
margin:5px 0px;
font-family:tahoma;
font-size:8pt;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
//<![CDATA[
var map = null;
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var Australia = new google.maps.LatLng(-25.085599,133.66699);
var mapOptions = {
center : Australia,
zoom : 4,
minZoom : 3,
streetViewControl : false,
mapTypeId : google.maps.MapTypeId.ROADMAP,
zoomControlOptions : {style:google.maps.ZoomControlStyle.MEDIUM}
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
//Find From location
var fromText = document.getElementById('start');
var fromAuto = new google.maps.places.Autocomplete(fromText);
fromAuto.bindTo('bounds', map);
//Find To location
var toText = document.getElementById('end');
var toAuto = new google.maps.places.Autocomplete(toText);
toAuto.bindTo('bounds', map);
//
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directions-panel'));
/*var control = document.getElementById('control');
control.style.display = 'block';
map.controls[google.maps.ControlPosition.TOP].push(control);*/
}
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
computeTotalDistance(response);
}
});
}
function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000;
/*Start Calculating Distance Fair*/
if (10>total){
var cost = <?php echo $fix; ?>;
}
else if (10<total && 20>total)
{
var cost = ((total * <?php echo $rate; ?>) + (<?php echo $extra; ?>));
}
else if (20<total && 30>total)
{
var cost = ((total * <?php echo $rate; ?>) + (<?php echo $next; ?>));
}
else if (30<total && 50>total)
{
var cost = (((total - 30) * <?php echo $cons; ?>) + (<?php echo $above; ?>));
}
else
{
var cost = (((total - 50) * <?php echo $min; ?>) + 130);
}
var fare = cost * 0.11 + cost;
var fare = Math.round(fare*100)/100;
/*Distance Fair Calculation Ends*/
document.getElementById("total").innerHTML = "Total Distance = " + total + " km and FARE = $" + fare;
}
function auto() {
var input = document.getElementById[('start'), ('end')];
var types
var options = {
types: [],
componentRestrictions: {country: ["AUS"]}
};
var autocomplete = new google.maps.places.Autocomplete(input, options);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onLoad="initialize()">
<table width="380px" border="2" cellpadding="0" cellspacing="0" bordercolor="#FF9F0F" style="border-collapse:collapse">
<tr>
<td bgcolor="#FFFF99" style="padding:5px;">
<table width="375px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div id="map_canvas" style="width: 374px; height: 300px; border: solid 1px #336699"></div></td>
</tr>
<tr>
<td><div id="form" style="width:374px; text-align:center; border: solid 1px #336699; background:#d1e1e4;">
From:
<input type="text" id="start" size="60px" name="start" placeholder="Enter Location From">
<br />
To:
<input size="60px" type="text" id="end" name="end" placeholder="Enter Destination ">
<input type="button" value="Calculate" onClick="calcRoute();">
<div id="total"></div>
</div></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
回答2:
If your question how can you have a fix price or a varying 'rate', why don't you just an if/else or a switch/case logic? Also, why are you injecting php when this could be done in javascript?
Instead of
var drivingDistanceMiles = gDir.getDistance().meters / 1000;
var drivingDistanceround = Math.round(drivingDistanceMiles*100)/100;
var cost = ((drivingDistanceMiles * <?php echo $rate; ?>) + (<?php echo $extra; ?>))
<?php echo $rate; ?>) + (<?php echo $extra; ?>))
Why not just do
var rate = 2;
var extra = 50;
taxModifier = 1.11; //11%
//...
var drivingDistanceMiles = gDir.getDistance().meters / 1000;
var drivingDistanceround = Math.round(drivingDistanceMiles*100)/100;
var cost;
if (drivingDistanceMiles < 10){
cost = 65;
} else if( drivingDistanceMiles >= 10 && drivingDistanceMiles < 30) {
cost = (drivingDistanceMiles * rate + extra) * taxModifier ;
} else {
cost = drivingDistanceMiles * 4. * taxModifier ;
}
来源：https://stackoverflow.com/questions/12499281/taxi-fare-calculation-using-php-with-google-distance-matrix-api-v2