Javascript - 將下拉框中的值傳遞給Google Maps API

Question

我正在爲使用Google Maps API的出租車公司創建報價單。目前，用戶在兩個文本框中輸入一個起點和一個接機點，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 
} 

然後繼續您已經編寫的代碼。