Suche mit Vorschlägen

MujoA · 30. Sep. 2013

Hallo zusammen,

ich wollte für eine Website einen Code schreiben der zwischen zwei eingegebenen Orten
die Distanz berechnet und die Fahrtkosten angibt.
Ich kenne mich kaum damit aus, aber mit ein bisschen googlen habe ich es
hinbekommen und es funktioniert.

Allerdings habe ich nun auf einer anderen Website genau so einen Rechner gefunden,
der aber bei der Eingabe gleich eine Liste mit relevanten Vorschlägen ausgibt.
Die Vorschläge sind auch nur Orte, z.B. wenn man "M" eingibt kommt "München"
oder "Müllerstraße" und nicht "Motorrad" oder "Möhre".

Ich habe mir den Seitenquellcode angesehen, aber verstehe nicht, wie der Rechner
funktioniert. Dort sind irgendwelche Verweise auf Facebook usw. Wenn man auch
auf "Berechnen" klickt, kommt man auf die nächste Seite und dort steht dann alles und
eine Karte wird auch angezeigt.
Das brauche ich alles nicht. Ich wollte eigentlich nur, dass das Ergebnis dann in der
Form "Distanz: xy, Kosten: yz" unter dem Rechner sofort angegeben wird.
Wie gesagt ich kenne mich nicht aus. Meine Frage ist also: Wie funktioniert sowas?

Hier ist die Seite (der Rechner ist gleich rechts): Flughafentransfer München | Limousinenservice München - TLS Munich - Startseite

Vielen Dank!

ein schlauer · 30. Sep. 2013

Der Code ist in dieser Javascript Datei: http://tls-munich.de/php/geohelper_de.js
Und dort steht es auch, er benutzt die google https://developers.google.com/maps/documentation/distancematrix/

MujoA · 30. Sep. 2013

Vielen Dank für deine Antwort!
Ich wollte nur noch Fragen, wie man den Code ändern muss, damit die Distanz, der Preis und die Karte
gleich dort unter dem Rechner angezeigt werden (oder einfach irgendwo da auf der selben Seite; muss nicht
darunter sein). Im Moment wird man ja auf diese "targetURL" gebracht, wenn man es berechnen will.
Ich nehme an, dass das bei dem "buttonObj.onclick" ist.

ein schlauer · 30. Sep. 2013

Ich hab keine Ahung warum die es dort so machen, die onclick Funktion ist auch die, die mit Abstand am unprofesionellsten aussieht. Die Distanzberechnung sollte mit der Google Maps API möglich sein und das anzeigen auf der Seite geht auch einfach.

Ich weiß nicht, wie ich dir da konkret weiter helfen könnte. Schau dir die (bzw. das) API mal an, auf der Seite sollten auch Beispiele sein. Das ganze ist aber nichts triviales, was man mal so eben aus dem Ärmel schüttelt.

kkapsner · 01. Okt. 2013

... oder geht es dir eigentlich nur um die Vorschläge?

Dann im ersten Beitrag schreibst du, dass das Distanzberechnen ja schon funktioniert...

Wenn ja, solltest du mal nach "autocomplete js" suchen.

MujoA · 01. Okt. 2013

Genau!

Der jetzige Code ist wahrscheinlich aus einer professionellen Sichtweise nicht der eleganteste,
aber ich lerne gerade erst und bin schon froh, wenn es einfach funktioniert. Das meiste habe ich
ergooglet und es dann etwas angepasst. Hier ist es:

HTML:

<html>
<head>
<title>Rechner</title>
<meta type="description" content="Distanz und Preis ermitteln."/>



<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script type="text/javascript">

    var address1;
    var address2;

    var latlng;
    var geocoder;
    var map;

    var distance;
    var preisprokm=1.0;


    function initialize()
    {
        geocoder = new google.maps.Geocoder(); 
        // Adressen
        address1 = document.getElementById("address1").value;
        address2 = document.getElementById("address2").value;



        // Koordinaten finden
        if (geocoder) 
        {
            geocoder.geocode( { 'address': address1}, function(results, status) 
            {
                if (status == google.maps.GeocoderStatus.OK) 
                {
                    location1 = results[0].geometry.location;
                } else 
                {
                    alert("Es ist ein Fehler aufgetreten. Bitte erneut versuchen: " + status);
                }
            });
            geocoder.geocode( { 'address': address2}, function(results, status) 
            {
                if (status == google.maps.GeocoderStatus.OK) 
                {
                  
                    location2 = results[0].geometry.location;
                    
                    showMap();
                } else 
                {
                    alert("Es ist ein Fehler aufgetreten. Bitte erneut versuchen: " + status);
                }
            });
        }
    }

    // Erstellt Karte
    function showMap()
    {
       
        latlng = new google.maps.LatLng((location1.lat()+location2.lat())/2,(location1.lng()+location2.lng())/2);

        
        var mapOptions = 
        {
            zoom: 1,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP 
        };

        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        // Route
        directionsService = new google.maps.DirectionsService();
        directionsDisplay = new google.maps.DirectionsRenderer(
        {
            suppressMarkers: true,
            suppressInfoWindows: true
        });
        directionsDisplay.setMap(map);
        var request = {
            origin:location1, 
            destination:location2,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) 
        {
            if (status == google.maps.DirectionsStatus.OK) 
            {
                directionsDisplay.setDirections(response);
                distance = "Entfernung: "+response.routes[0].legs[0].distance.text;
		distance += "</br>Preis pro km: " + preisprokm + " €";
		distance += "</br>Ungefährer Preis: " + ((Math.round((response.routes[0].legs[0].distance.value)/1000)*preisprokm)+3.5) + " €";
		distance += "</br>Ungefähre Zeit: "+response.routes[0].legs[0].duration.text;

		document.getElementById("distance_road").innerHTML = distance;
            }
        });


        // Marker  
        var marker1 = new google.maps.Marker({
            map: map, 
            position: location1,
            title: "Start"
        });
        var marker2 = new google.maps.Marker({
            map: map, 
            position: location2,
            title: "Ziel"
        });

      
   

        // Entfernung berechnen
        var R = 6371; 
        var dLat = toRad(location2.lat()-location1.lat());
        var dLon = toRad(location2.lng()-location1.lng()); 

        var dLat1 = toRad(location1.lat());
        var dLat2 = toRad(location2.lat());

        var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
                Math.cos(dLat1) * Math.cos(dLat1) * 
                Math.sin(dLon/2) * Math.sin(dLon/2); 
    }

    function toRad(deg) 
    {
        return deg * Math.PI/180;
    }
</script>

</head>

<body bgcolor="#eeeeee">
    <div id="form" style="width:100%; height:20%">
        <table align="center" valign="center">
            <tr>
                <td colspan="7" align="center"><b>Entfernung und Preis berechnen</b></td>
            </tr>
            <tr>
                <td colspan="7"> </td>
            </tr>
            <tr>	
                <td>Start:</td>
                <td> </td>
                <td><input type="text" name="address1" id="address1" size="50"/></td>
                <td> </td>
                <td>Ziel:</td>
                <td> </td>
                <td><input type="text" name="address2" id="address2" size="50"/></td>
            </tr>
            <tr>
                <td colspan="7"> </td>
            </tr>
            <tr>
                <td colspan="7" align="center"><input type="button" value="Berechnen" onClick="initialize();"/></td>
            </tr>
        </table>
    </div>
    <center><div style="width:100%; height:10%" id="distance_road"></div></center>
	
    <center><div id="map_canvas" style="width:70%; height:54%"></div></center>
</body>
</html>

Eigentlich will ich jetzt nur noch Autocomplete auf "address1" und "address2" schmeißen.
Habe es an der Stelle so probiert:

Code:

        var address1 = document.getElementById('address1');
	var address2 = document.getElementById('address2');

	var autocomplete1 = new google.maps.places.Autocomplete(address1);
	var autocomplete2 = new google.maps.places.Autocomplete(address2);

	autocomplete1.bindTo('bounds', map);
	autocomplete2.bindTo('bounds', map);

Allerdings funktioniert dann nur "address2" und das auch nur, wenn ich davor einmal sinnlos auf "Berechnen" klicke...
Das "bindTo" scheint auch nicht zu funktionieren. Ich denke mal, dass das daran liegt, dass die map erst erstellt wird
wenn man auf "Berechnen" klickt.

kkapsner · 01. Okt. 2013

Das Autocomplete darfst du auf keinen Fall in der initialize-Funktion machen, sondern muss im window.onload-Event statt finden. Dabei existiert das map-Objekt auch nocht nicht und deswegen darfst du das .bindTo gar nicht machten.

MujoA · 01. Okt. 2013

Vielen vielen Dank für die Hilfe!
Ich war von dem Beispiel von der einen Website verwirrt, denn soweit ich das da sehen konnte, war Autocomplete dort in der initialize-Funktion.
Habe es jetzt mit "body onload" gemacht (bei "window.onload" muss ich etwas falsch gemacht haben und es funktionierte nicht) und das map-Objekt
wird auch beim "onload" erzeugt, damit das ".bindTo" auch danach möglich ist.

Auf jeden Fall scheint nun alles zu funktionieren, allerdings passiert es manchmal, aber wirklich nur ab und zu, dass man zweimal auf "Berechnen" klicken
muss, damit es berechnet wird. Beim ersten Mal passiert noch nichts. Scheint auch nicht von der Eingabe abhängig zu sein, denn die gleiche Eingabe
geht manchmal auch mit einem Klick.
Naja so schlimm finde ich das jetzt nicht und vielleicht liegt es auch nicht am Code, da es so seltsam auftritt.

Nochmals Danke!

kkapsner · 01. Okt. 2013

Das onload-Attribut in <body> ist genau das window.onload...

Bitte - gern geschehen.

Klunki · 08. Dez. 2014

Hallo wie kann ich die ergebnisse in PHP Parsen hat da jemand eine idee.
Sprich Strasse/Stadt von nach und Kilometer und Preisergebniss.

HTML:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script type="text/javascript">

	var address1;
    var address2;

    var latlng;
    var geocoder;
    var map;

    var distance;
    var preisprokm=1.90;


    function initialize()
    {
        geocoder = new google.maps.Geocoder(); 
        // Adressen
        address1 = document.getElementById("address1").value;
        address2 = document.getElementById("address2").value;
		


        // Koordinaten finden
        if (geocoder) 
        {
            geocoder.geocode({ 'address': address1}, function(results, status) 
            {
                if (status == google.maps.GeocoderStatus.OK) 
                {
                    location1 = results[0].geometry.location;
                } else 
                {
                    alert("Es ist ein Fehler aufgetreten. Bitte erneut versuchen: " + status);
                }
            });
            geocoder.geocode( { 'address': address2}, function(results, status) 
            {
                if (status == google.maps.GeocoderStatus.OK) 
                {
                  
                    location2 = results[0].geometry.location;
                    
                    showMap();
                } else 
                {
                    alert("Es ist ein Fehler aufgetreten. Bitte erneut versuchen: " + status);
                }
            });
        }
    }

    // Erstellt Karte
    function showMap()
    {
       
        latlng = new google.maps.LatLng((location1.lat()+location2.lat())/2,(location1.lng()+location2.lng())/2);

        
        var mapOptions = 
        {
            zoom: 14,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP 
        };

        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);


        // Route
        directionsService = new google.maps.DirectionsService();
        directionsDisplay = new google.maps.DirectionsRenderer(
        {
            suppressMarkers: true,
            suppressInfoWindows: true
        });
        directionsDisplay.setMap(map);
        var request = {
            origin:location1, 
            destination:location2,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) 
        {
            if (status == google.maps.DirectionsStatus.OK) 
            {
                directionsDisplay.setDirections(response);
                distance = "Entfernung: "+response.routes[0].legs[0].distance.text;
		distance += "Preis pro km: " + preisprokm + " €";
		distance += "Preis: " + ((Math.round((response.routes[0].legs[0].distance.value)/1000)*preisprokm)+3.5) + " €";
		distance += "Fahrzeit: "+response.routes[0].legs[0].duration.text;

		document.getElementById("distance_road").innerHTML = distance;
            }
        });

        // Marker  
        var marker1 = new google.maps.Marker({
            map: map, 
            position: location1,
            title: "Start"
        });
        var marker2 = new google.maps.Marker({
            map: map, 
            position: location2,
            title: "Ziel"
        });
   

        // Entfernung berechnen
        var R = 6371; 
        var dLat = toRad(location2.lat()-location1.lat());
        var dLon = toRad(location2.lng()-location1.lng()); 

        var dLat1 = toRad(location1.lat());
        var dLat2 = toRad(location2.lat());

        var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
                Math.cos(dLat1) * Math.cos(dLat1) * 
                Math.sin(dLon/2) * Math.sin(dLon/2); 
    }

    function toRad(deg) 
    {
        return deg * Math.PI/180;
    }
</script>

Suche mit Vorschlägen

MujoA

New member

ein schlauer

Lounge-Member

MujoA

New member

ein schlauer

Lounge-Member

kkapsner

Super Moderator

MujoA

New member

kkapsner

Super Moderator

MujoA

New member

kkapsner

Super Moderator

Klunki

New member