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

まず、 fancybox に表示する URL を作成できるように、Google マップに渡すことができるURL パラメーターを知る必要がある場合があります。

次に、フォームに ID (例: id=myMapForm") を追加して、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 を作成します
  • 結果の URL を fancybox で開きます

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 に答える