Javascript - Übergabe eines Wertes aus einer Dropdown-Box an Google Maps API

Question

Ich erstelle ein Angebotsformular für ein Taxi-Unternehmen, das die Google Maps API verwendet. Derzeit gibt der Benutzer einen Startpunkt und einen Abholpunkt in zwei Textfelder ein, und die API berechnet die Entfernung zwischen den beiden Punkten und die Kosten für die Fahrt.

Ich versuche, zwei Dropdown-Felder mit festgelegten Positionen hinzuzufügen, so dass der Benutzer entweder eine dieser Positionen auswählen oder die Textfelder zur Eingabe der Daten verwenden kann. Der Code ermittelt dann, welcher Wert eingegeben wurde, und verwendet diesen Wert entsprechend für die Berechnung des Standorts. Ich habe Schwierigkeiten mit dem letzten Teil. Ich kann nicht herausfinden, wie ich das am besten anstelle. Ich habe versucht, den Wert aus der Dropdown-Box an das Texteingabefeld zu übergeben, als ob das Texteingabefeld manuell ausgefüllt worden wäre. Ich bin immer noch der Meinung, dass dies der beste Weg ist, aber ich kann ihn einfach nicht umsetzen.

Mein Code lautet wie folgt:

J

var geocoder, map, location1, location2, gDir;

    function initialize() {
    geocoder = new GClientGeocoder();
    map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(54.019066,-1.381531),9); // change these if necessary
    map.addControl(new GSmallMapControl());
    gDir = new GDirections(map);
    GEvent.addListener(gDir, "load", function() {

        var drivingDistanceMiles = Math.ceil(gDir.getDistance().meters / 1609.344);

        if(drivingDistanceMiles <= 70)
            {
            var drivingDistanceMilesCost = (drivingDistanceMiles) * 1.75;
            }
        else (drivingDistanceMiles >= 70)
            {
         var drivingDistanceMilesCost =(drivingDistanceMiles) * 1.2;
            }

        document.getElementById('resultsa').innerHTML = '<strong>From: </strong>' + location1.address + '<br /> ';
        document.getElementById('resultsb').innerHTML = '<strong>To: </strong>' + location2.address + ' <br />' ;

        document.getElementById('addfrom').innerHTML = document.getElementById('resultsa').innerHTML;
        document.getElementById('addfrom').value = document.getElementById('resultsa').innerHTML;
        document.getElementById('addto').innerHTML = document.getElementById('resultsb').innerHTML;
        document.getElementById('addto').value = document.getElementById('resultsb').innerHTML;

        document.getElementById('price').innerHTML =  drivingDistanceMilesCost.toFixed(2);
        document.getElementById('price2').innerHTML = document.getElementById('price').innerHTML;
        document.getElementById('price2').value = document.getElementById('price').innerHTML;

        });
}

function showLocation() {
if(document.getElementById('quote').innerHTML!='') { // need to wait for the result from gmaps
document.forms[0].onsubmit = null;
document.forms[0].action = '#';
document.getElementById('GMsubmit').style.display = 'none';
document.getElementById('CBsubmit').style.display = '';
}
    geocoder.getLocations(document.forms[0].address1.value, function (response) {
        if (!response || response.Status.code != 200)
        {
            alert("Sorry, please enter a valid postcode");
        }
        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].address2.value, function (response) {
                if (!response || response.Status.code != 200)
                {
                    alert("Sorry, please enter a valid postcode");
                }
                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);

                }
            });
        }
    });
}

H

<form onSubmit="this.address1.value+='&nbsp;UK';this.address2.value+='&nbsp;UK'; showLocation();  return false;" action="#" id="quote">

    <div style="width: 317px;" class="style3">
        <table style="width: 237%;">
            <tbody><tr> 
                <td style="width: 268px;" class="style5">   
                <p class="style5">
                <p id="instruct">Pick Up point</p>
    <p>Select a location or enter your address:</p>
    <select name="startapt">
      <option value=""></option>
<option value="MAN">Manchester Airport</option>
<option value="LBA">Leeds Bradford Airport</option>
<option value="NCL">Newcastle Airport</option>
<option value="MME">Durham Tees Valley Airport</option>
<option value="53.966296,-1.115512">Leeds Railway Station</option>
<option value="53.909677,-1.17926">York Railway Station</option>
    </select><br /><br />
        <input type="text" style="width: 272px;" value="From" onFocus="this.value=''" name="address1">

        </p>
    <p id="resultsa">&nbsp;

        </p><p>
        <p id="instruct">Destination</p>
    <p>Select a destination or enter your address:</p>
    <select name="endapt">
      <option value=""></option>
<option value="MAN">Manchester Airport</option>
<option value="LBA">Leeds Bradford Airport</option>
<option value="NCL">Newcastle Airport</option>
<option value="MME">Durham Tees Valley Airport</option>
<option value="53.966296,-1.115512">Leeds Railway Station</option>
<option value="53.909677,-1.17926">York Railway Station</option>
    </select><br /><br />
        <input type="text" size="20" style="width: 272px;" value="To" onFocus="this.value=''" name="address2"></p><p id="resultsb">&nbsp;
                </p>
        <button style="display: none;" type="submit" id="CBsubmit">confirm &amp; book</button>

                    <p id="results">&nbsp;</p>
                    <p> Estimated Cost of Journey:</p>
 <p id="price">
        <input type="submit" value="Calculate Price" style="border: 1px solid rgb(0, 0, 0); width: 178px;" id="GMsubmit"></p>  <p id="results3"></p>    <input type="hidden" id="price2" name="price2"><input type="hidden" id="addfrom" name="addfrom"><input type="hidden" id="addto" name="addto">               </td>
                <td>    
 <div class="style4" style="width: 500px; height: 500px; position: relative; background-color: rgb(229, 227, 223);" id="map_canvas"></div>

                </td>
            </tr>
        </tbody></table>

    </div>

Vielen Dank im Voraus für die Hilfe.

Answer 1

Eine Lösung wäre, den Wert von Adresse1 und Adresse2 zu überprüfen, bevor Sie Daten in JS manipulieren. Pseudocode unten:

if (address1.value == '') { 
    address1.value = startapt.options[startapt.selectedIndex].text 
}
if (address2.value == '') { 
    address2.value = endapt.options[endapt.selectedIndex].text 
}

Fahren Sie dann mit dem Code fort, den Sie bereits geschrieben haben.