将表单变量传递给 Google Maps API 以获取起点和终点答案

【问题标题】：Pass form vars to Google Maps API for origin and destination将表单变量传递给 Google Maps API 以获取起点和终点
【发布时间】：2017-03-08 11:53:25
【问题描述】：

我有一个常规表单（不是 JS），其中一个输入从数据库中提取城市列表，另一个输入具有硬连线的机场位置。

我需要将这两个位置传递给 Google Map API 以返回距离和行车路线。

这里是API交互的演示代码：

https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-directions

我也愿意使用这个 Coldfusion 组件，但我转了几个小时试图让它与这种常规形式配合得很好，但没有成功。

http://cfgmap.riaforge.org/

非常感谢任何帮助。

形式：

 <form name="frmAutoCompleteCountry" id="frmAutoCompleteCountry" action="" method="post" enctype="multipart/form-data">

Select the airport:

 <select name="airport">
   <option value="sfo">San Francisco Airport</option>
   <option value="oak">Oakland Airport</option>
   <option value="sjc">San Jose Airport</option>
 </select>

<input type="text" name="city" id="city" />

<input type="submit" name="submit" id="submit" value="Submit">

</form>

示例：
旧金山机场/加利福尼亚州圣何塞奥克兰机场/加州伯克利

【问题讨论】：

暂时忽略您的表单。你知道如何将变量传递给 api 并取回一些东西吗？
我已经让这两个不同的脚本（上面的链接）按预期在本地工作得很好。
您能否向我们展示您的代码，包括您尝试使用的示例城市和机场位置。
我在原始帖子中添加了“基础”表单。只是尝试将这两条数据发送到 API 并获得类似于他们在这里的内容：developers.google.com/maps/documentation/javascript/examples/…
我发现这个脚本正在使用一个输入字段。我只是不太了解 JS，无法尝试添加第二个字段来替换这个字段上的“都柏林”的预定义目的地。 jsfiddle.net/zufnmkgg

标签： javascript google-maps-api-3 coldfusion

【解决方案1】：

我只是添加了一个名为 address2 的新表单输入；在JS中添加了var并将纬度数字替换为address2。

$('#submit').click(function() {
var address = $('#address').val();
var address2 = $('#address2').val();
var request = {
    origin: address,
    destination: address2,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
};

【讨论】：