0

任何人都可以帮助解决以下问题：-

我需要将以下结果显示在花式框中，可以吗？

<h2>Get Directions</h2>
<form action="http://maps.google.com/maps" method="get" target="fancybox">
<h6>Enter your starting address:</h6>
<input type="text" name="saddr" value="Enter Your Postcode"/>
<input type="hidden" name="daddr" value="52.444266,-1.648421" />
<input type="submit" value="Get Directions" class="button" />
</form>
4

1 回答 1

0

首先，您可能需要知道可以将哪些URL 参数传递给 Google 地图，以便构建要在 fancybox 中显示的 URL。

其次，id=myMapForm"在表单中添加一个 ID（例如），以便您可以使用 jQuery 对其进行操作：

 <form id="myMapForm" action="http://maps.google.com/maps" method="get" target="fancybox">
    <h6>Enter your starting address:</h6>
    <input type="text" name="saddr" value="Enter Your Postcode" />
    <input type="hidden" name="daddr" value="52.444266,-1.648421" />
    <input type="submit" value="Get Directions" class="button" />
 </form>

然后，您可以使用以下脚本：

  • 防止在新窗口/标签中提交表单
  • 从字段中获取输入值并将它们存储在变量中
  • 构建将变量作为参数传递的 Google 地图 URL
  • 在 fancybox 中打开生成的 URL

jQuery代码：

$("#myMapForm").on("submit", function (e) {
    e.preventDefault();
    var sAdd = $(this).find("input[name=saddr]").val().replace(" ", "+");
    var dAdd = $(this).find("input[name=daddr]").val();
    var url  = "https://maps.google.com/maps?f=q&source=s_q&hl=en&q=from:+" + sAdd + "+to:+" + dAdd + "&ie=UTF8&saddr=" + sAdd + "&daddr=" + dAdd + "&center=" + dAdd + "&z=7&output=embed";
    $.fancybox(url, {
        type: "iframe"
    });
});

请注意，我们将.replace()方法添加到源地址以将任何spaces转换为​​加号 ( +)。这是因为邮政编码可能类似于SW1A 0AA(UK) 并且必须SW1A+0AA在 URL 中转换。

见JSFIDDLE

注意：.on()需要 jQuery v1.7+

于 2013-04-23T19:29:58.040 回答