Javascript - 将下拉框中的值传递给 Google Maps API

Question

我正在使用 Google Maps API 为一家出租车公司创建报价表。目前，用户在 2 个文本框中输入起点和上车点，API 会计算两点之间的距离和行程费用。

我正在尝试添加两个具有设置位置的下拉框，以便用户可以选择这些位置之一或使用文本框输入数据。然后代码将确定输入了哪个值，并相应地使用该值来计算位置。我正在努力做这最后一点。我想不出最好的方法来做到这一点。我一直在尝试将下拉框的值传递给文本输入框，就好像文本输入框是手动填充的一样。我仍然认为这是最好的方法，但似乎无法实现。

我的代码如下:

Javascript

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);

                }
            });
        }
    });
}

HTML

<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>

在此先感谢您的帮助。

Answer 1

一种解决方案是在 JS 中操作任何数据之前检查 Address1 和 Address2 的值。伪代码如下:

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

然后继续您已经编写的代码。