Afstand calculator
Op dit moment ben ik bezig met een taxi calculator. Deze berekent het aantal kilometers mbv Google Maps en zet deze om in een prijs.
Hiervoor heb ik twee radio buttons aangemaakt, maar niet kunnen koppelen aan de javasscript. Een radiobutton is voor de normale rit en de andere voor een speciale.
Wanneer de afstand onder de 40 kilometer is, is de prijs anders dan boven de 40 kilometer. Er moeten dus in totaal 4 verschillende kilometerprijzen komen. Twee voor de normale rit en 2 voor de speciale.
Op dit moment heb ik alleen dit stukje code:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
if (total<40)
{
var cost = parseInt(total) * 1.75;
}
else
{
var cost = parseInt(total) * 1.50;
}
{
var cost = parseInt(total) * 1.75;
}
else
{
var cost = parseInt(total) * 1.50;
}
Zou iemand me kunnen helpen om dit te kunnen oplossen?
Alvast bedankt!
Gewijzigd op 30/06/2013 12:48:38 door Nico Neijhuis
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!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>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
function update() {
var kmPrijs;
var checked = $(".radio-rit:checked").attr('id'); // verkrijg het id van de geselcteerde radiobutton
var km = $('#km-rit').val(); // lees de inhoud van de kilometer input
if(km > 40)
{
kmPrijs = 1.4;
if(checked == 'speciale-rit')
kmPrijs = 1.65;
}
else
{
kmPrijs = 1.5;
if(checked == 'speciale-rit')
kmPrijs = 1.75;
}
kmPrijs *= km;
$('#total-rit').val(' ' + kmPrijs.toFixed(2)); // verander de inhoud van de totaal input
}
// als de pagina geladen is wordt deze functie automatisch uitgevoerd
$(document).ready(function() {
// als de radio buttons wijzigen roep dan de functie update() aan
$('.radio-rit').change(function(e) {
update();
});
// als er een toets is ingedrukt en losgelaten in de kilometer input roep dan de functie update() aan
$('#km-rit').keyup(function(e) {
update();
});
});
</script>
</head>
<body>
<input type="text" id="km-rit" /><br/>
<input class="radio-rit" type="radio" name="rit" id="normale-rit" checked="checked" /><label for="normaal-rit">Normale rit</label><br/>
<input class="radio-rit" type="radio" name="rit" id="speciale-rit" /><label for="speciale-rit">Speciale rit</label><br/>
<input type="text" readonly="readonly" id="total-rit"/>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
function update() {
var kmPrijs;
var checked = $(".radio-rit:checked").attr('id'); // verkrijg het id van de geselcteerde radiobutton
var km = $('#km-rit').val(); // lees de inhoud van de kilometer input
if(km > 40)
{
kmPrijs = 1.4;
if(checked == 'speciale-rit')
kmPrijs = 1.65;
}
else
{
kmPrijs = 1.5;
if(checked == 'speciale-rit')
kmPrijs = 1.75;
}
kmPrijs *= km;
$('#total-rit').val(' ' + kmPrijs.toFixed(2)); // verander de inhoud van de totaal input
}
// als de pagina geladen is wordt deze functie automatisch uitgevoerd
$(document).ready(function() {
// als de radio buttons wijzigen roep dan de functie update() aan
$('.radio-rit').change(function(e) {
update();
});
// als er een toets is ingedrukt en losgelaten in de kilometer input roep dan de functie update() aan
$('#km-rit').keyup(function(e) {
update();
});
});
</script>
</head>
<body>
<input type="text" id="km-rit" /><br/>
<input class="radio-rit" type="radio" name="rit" id="normale-rit" checked="checked" /><label for="normaal-rit">Normale rit</label><br/>
<input class="radio-rit" type="radio" name="rit" id="speciale-rit" /><label for="speciale-rit">Speciale rit</label><br/>
<input type="text" readonly="readonly" id="total-rit"/>
</body>
</html>
@Frank Nietbelangrijk: dank voor je hulp!
Gewijzigd op 30/06/2013 00:59:24 door Wouter J
Wouter J op 30/06/2013 00:59:07:
Nee, je laat 28 onnodige kb in.
Lekker spannend. Als deze pagina voor een handheld is dan zou ik ook liever zonder jQuery werken. Voor de rest maakt t geen bal uit. Daarnaast neemt het de verschillen in browsers voor je weg waardoor je zonder moeilijk gedoe een script hebt dat in alle grote browsers werkt.
Gewijzigd op 30/06/2013 10:27:17 door Frank Nietbelangrijk
Quote:
Daarnaast neemt het de verschillen in browsers voor je weg waardoor je zonder moeilijk gedoe een script hebt dat in alle grote browsers werkt. - See more at: http://www.phphulp.nl/php/forum/topic/afstand-calculator/91331/last/#sthash.mhamVhBz.dpuf
En welk browserverschil is er dan in de code van jouw? De hele code is te herschrijven naar JavaScript met evenveel regels en evenveel functies die door elk browser ondersteund worden.
En daarnaast kan de code nog wat geoptimaliseerd worden.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var kmElem = $('#km-rit');
var totalElem = $('#total-rit');
function update() {
var kmPrijs;
var checked = $(".radio-rit:checked").attr('id'); // verkrijg het id van de geselecteerde radiobutton
var km = kmElem.val(); // lees de inhoud van de kilometer input
if(km > 40)
{
kmPrijs = 1.4;
if(checked == 'speciale-rit')
kmPrijs = 1.65;
}
else
{
kmPrijs = 1.5;
if(checked == 'speciale-rit')
kmPrijs = 1.75;
}
kmPrijs *= km;
totalElem.val(' ' + kmPrijs.toFixed(2)); // verander de inhoud van de totaal input
}
// als de pagina geladen is wordt deze functie automatisch uitgevoerd
$(document).ready(function() {
// als de radio buttons wijzigen roep dan de functie update() aan
$('.radio-rit').change(update);
// als er een toets is ingedrukt en losgelaten in de kilometer input roep dan de functie update() aan
kmElem.keyup(update);
}); - See more at: http://www.phphulp.nl/php/forum/topic/afstand-calculator/91331/last/#sthash.mhamVhBz.dpuf
var totalElem = $('#total-rit');
function update() {
var kmPrijs;
var checked = $(".radio-rit:checked").attr('id'); // verkrijg het id van de geselecteerde radiobutton
var km = kmElem.val(); // lees de inhoud van de kilometer input
if(km > 40)
{
kmPrijs = 1.4;
if(checked == 'speciale-rit')
kmPrijs = 1.65;
}
else
{
kmPrijs = 1.5;
if(checked == 'speciale-rit')
kmPrijs = 1.75;
}
kmPrijs *= km;
totalElem.val(' ' + kmPrijs.toFixed(2)); // verander de inhoud van de totaal input
}
// als de pagina geladen is wordt deze functie automatisch uitgevoerd
$(document).ready(function() {
// als de radio buttons wijzigen roep dan de functie update() aan
$('.radio-rit').change(update);
// als er een toets is ingedrukt en losgelaten in de kilometer input roep dan de functie update() aan
kmElem.keyup(update);
}); - See more at: http://www.phphulp.nl/php/forum/topic/afstand-calculator/91331/last/#sthash.mhamVhBz.dpuf
En de normale JavaScript variant:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
var kmElem = document.getElementById('km-rit');
var totalElem = document.getElementById('total-rit');
var radioElems = document.getElementsByClassName('radio-rit'); // jeeh! we kunnen het zelfs nog meer optimaliseren!!
function update() {
var kmPrijs;
// verkrijg het id van de geselecteerde radiobutton
for (i = -1; radioElem = radioElems[++i]; ) {
if (radioElem.checked) {
var checked = radioElem.getAtttibute('id');
}
}
var km = kmElem.value; // lees de inhoud van de kilometer input
if(km > 40)
{
kmPrijs = 1.4;
if(checked == 'speciale-rit')
kmPrijs = 1.65;
}
else
{
kmPrijs = 1.5;
if(checked == 'speciale-rit')
kmPrijs = 1.75;
}
kmPrijs *= km;
totalElem.value = ' ' + kmPrijs.toFixed(2); // verander de inhoud van de totaal input
}
// als de pagina geladen is wordt deze functie automatisch uitgevoerd
window.onload = function() {
// als de radio buttons wijzigen roep dan de functie update() aan
for (i = -1; radioElem = radioElems[++i]; ) {
radioEem.onchange = update;
}
// als er een toets is ingedrukt en losgelaten in de kilometer input roep dan de functie update() aan
kmElem.onkeyup = kmElem.onchange = update;
}); - See more at: http://www.phphulp.nl/php/forum/topic/afstand-calculator/91331/last/#sthash.mhamVhBz.dpuf
var totalElem = document.getElementById('total-rit');
var radioElems = document.getElementsByClassName('radio-rit'); // jeeh! we kunnen het zelfs nog meer optimaliseren!!
function update() {
var kmPrijs;
// verkrijg het id van de geselecteerde radiobutton
for (i = -1; radioElem = radioElems[++i]; ) {
if (radioElem.checked) {
var checked = radioElem.getAtttibute('id');
}
}
var km = kmElem.value; // lees de inhoud van de kilometer input
if(km > 40)
{
kmPrijs = 1.4;
if(checked == 'speciale-rit')
kmPrijs = 1.65;
}
else
{
kmPrijs = 1.5;
if(checked == 'speciale-rit')
kmPrijs = 1.75;
}
kmPrijs *= km;
totalElem.value = ' ' + kmPrijs.toFixed(2); // verander de inhoud van de totaal input
}
// als de pagina geladen is wordt deze functie automatisch uitgevoerd
window.onload = function() {
// als de radio buttons wijzigen roep dan de functie update() aan
for (i = -1; radioElem = radioElems[++i]; ) {
radioEem.onchange = update;
}
// als er een toets is ingedrukt en losgelaten in de kilometer input roep dan de functie update() aan
kmElem.onkeyup = kmElem.onchange = update;
}); - See more at: http://www.phphulp.nl/php/forum/topic/afstand-calculator/91331/last/#sthash.mhamVhBz.dpuf
Helemaal:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
//<![CDATA[
var map = null;
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var Amsterdam = new google.maps.LatLng(52.138433,5.614014);
var mapOptions = {
center : Amsterdam,
zoom : 8,
minZoom : 5,
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 (total<40)
{
var cost = parseInt(total) * 1.75;
}
else
{
var cost = parseInt(total) * 1.50;
}
// retour en extrakosten
var fare = cost;
var fare = Math.round(fare*100)/100;
var fare = Math.round(fare*100)/100;
if(document.getElementById("doubleFare").checked)
{
fare = fare * 2;
}
if(document.getElementById("speciaal-rit").checked)
{
fare = fare * 1.18;
}
/*Distance Fair Calculation Ends*/
document.getElementById("total").innerHTML = "Totale afstand is " + total + " kilometer <br /> De kosten zijn €" + fare;
}
function auto() {
var input = document.getElementById[('start'), ('end')];
var types
var options = {
types: [],
componentRestrictions: {country: ["NL"]}
};
var autocomplete = new google.maps.places.Autocomplete(input, options);
}
google.maps.event.addDomListener(window, 'load', initialize);
var map = null;
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var Amsterdam = new google.maps.LatLng(52.138433,5.614014);
var mapOptions = {
center : Amsterdam,
zoom : 8,
minZoom : 5,
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 (total<40)
{
var cost = parseInt(total) * 1.75;
}
else
{
var cost = parseInt(total) * 1.50;
}
// retour en extrakosten
var fare = cost;
var fare = Math.round(fare*100)/100;
var fare = Math.round(fare*100)/100;
if(document.getElementById("doubleFare").checked)
{
fare = fare * 2;
}
if(document.getElementById("speciaal-rit").checked)
{
fare = fare * 1.18;
}
/*Distance Fair Calculation Ends*/
document.getElementById("total").innerHTML = "Totale afstand is " + total + " kilometer <br /> De kosten zijn €" + fare;
}
function auto() {
var input = document.getElementById[('start'), ('end')];
var types
var options = {
types: [],
componentRestrictions: {country: ["NL"]}
};
var autocomplete = new google.maps.places.Autocomplete(input, options);
}
google.maps.event.addDomListener(window, 'load', initialize);
Calculator:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*Start Calculating Distance Fair*/
if (total<40)
{
var cost = parseInt(total) * 1.75;
}
else
{
var cost = parseInt(total) * 1.50;
}
// retour en extrakosten
var fare = cost;
var fare = Math.round(fare*100)/100;
var fare = Math.round(fare*100)/100;
if(document.getElementById("doubleFare").checked)
{
fare = fare * 2;
}
if(document.getElementById("speciaal-rit").checked)
{
fare = fare * 1.18;
}
if (total<40)
{
var cost = parseInt(total) * 1.75;
}
else
{
var cost = parseInt(total) * 1.50;
}
// retour en extrakosten
var fare = cost;
var fare = Math.round(fare*100)/100;
var fare = Math.round(fare*100)/100;
if(document.getElementById("doubleFare").checked)
{
fare = fare * 2;
}
if(document.getElementById("speciaal-rit").checked)
{
fare = fare * 1.18;
}
Aleen is het probleem nu dat ik de totale afstand en prijs niet afgerond krijg. Ik krijg prijzen zoals: €181.50000000000003 of kilometers als: 110.946.
Wie o wie zou me hiermee kunnen helpen?
Gewijzigd op 30/06/2013 22:10:21 door Nico Neijhuis
document.getElementById("total").innerHTML = "Totale afstand is " + total.toFixed(2) + " kilometer <br /> De kosten zijn €" + fare.toFixed(2);
Helpt dat?