1

Google マップをページに追加する jQuery コントロールに取り組んでいます。

ここまでは順調ですね。

その一環として、特定の位置 (ユーザーのホーム ロケーション、navigator.geolocation.getCurrentPosition) に 1 つのマーカーを配置できるカスタム コントロールをいくつか追加しています。繰り返しますが、これまでのところとても良いです。

私のカスタム コントロールには、ユーザーが検索アドレスを入力できるアドレス入力フィールドもあります。1 つの一致が得られれば、マーカーを簡単に追加できます。ただし、複数の結果が得られた場合は、ユーザーがクリックして選択できるカスタム コントロールに一連のリンクを追加したいと考えています。

これが問題です。私のコードはリンクをうまくレンダリングしますが、それらに DomListener をアタッチすることはできません。

これは、リンクをカスタム コントロールの DIV にレンダリングするコードです。

if (results.length > 1 || results[0].partial_match) {
    $(element).data("addressResults", results);
    var html ="<div>Did you mean?<br /><ul>";
    for (var i=0; (i< results.length && i < 6); i++) {
        html+= '<li><a class"selectLocation" ' +
          'item="'+i+ '" >' + results[i].formatted_address+'</a></li>';
    }
    html+= '</ul></div>';
    html+= '<a class="closeAddressResults">None of these - Back to map</a>'
    resultsPanel // previously defined jQuery selector that works fine
        .html(html)
        .removeClass('error')
        .slideDown();
}

私が言ったように、これは物事をうまくレンダリングし、クラス「selectLocation」で正しく配置されたリンクになります

通常、私は $(document).on("click", ".selectLocation", function(e, data){...}); として jQuery を使用します。しかし、それは不可能です。

別の方法として、私ができることを望んでいたこと (それは機能しません) は、dom リスナーを次のように作成することです。

var selectAddressCtrl = document.getElementByClassName('selectAddress');
google.maps.event.addDomListener(selectAddressCtrl, 'click', function(e) {...}

しかし、それはどこでもうまくいかないようです。

問題は、リンクが動的に作成されることであると思われます.Googleはイベントを既存のアイテムにのみ添付します. 拘束力のあるイベントを保持することはできますが、その複数のインスタンスを作成することには慎重です。

誰にも提案はありますか？

4

1 に答える 1

1

Andrew のコメントは正しいです。これを機能させるために私が見つけた唯一の方法は、Google のドキュメントで提案されている方法で UI 要素を作成し、追加時にバインドすることです。

すなわち

foreach (linktoAdd)
    var link = document.createElement('a');
    (set link properties)
    google.maps.event.addDomListener(link, 'click', function(e) {...});
    (add element to UI)
}
于 2013-06-08T12:39:42.233 に答える