Javascript-将值从下拉框中传递到Google Maps API [英] Javascript - Pass a value from dropdown box to Google Maps API

问题描述

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

I am creating a quote form for a taxi firm using Google Maps API. Currently, the user enters a start point and a pick up point into 2 text boxes and the API calculates the distance between the two points and the cost of the journey.

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

I am trying to add two dropdown boxes with set locations so that the user can either select one of these locations or use the text boxes to input the data. The code will then determine which value has been input and use that value accordingly for calculating the location. I'm struggling to do this final bit. I can't work out the best way to do this. I have been trying to pass the value from the dropdown box to the text input box, as if the text input box had been filled manually. I still think this is the best way, but just can't seem to implement it.

我的代码如下:

Javascript

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>

预先感谢您的帮助.

推荐答案

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

One solution would be to check the value of Address1 and Address2 before you manipulate any data in JS. Pseudocode below:

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

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

Then continue with the code you've already written.

这篇关于Javascript-将值从下拉框中传递到Google Maps API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！