0

マップされている各場所のマーカーを含む Google マップの Javascript API を使用して作成したマップがあります。次に、マップの外側のサイドバーに各場所へのリンクがあり、クリックすると関連する場所の情報ウィンドウが開きます。これはすべてうまくいきます。私が理解しようとしているのは、マーカーの 1 つをクリックすると、対応するリンク (これらはページ上のリスト項目です) が強調表示されるように、バインドを「反対方向に移動」する方法です。マップのマーカーを作成するとき、マーカーは配列の場所と共に配列に格納され、リンクに埋め込まれます。そのため、クリック関数は配列内のマーカーの場所を取得します。

side_bar_html += '<li id="li-'+ (markersArray.length-1) + '"><a href="javascript:myclick(' + (markersArray.length-1) + ')">' + address[1] + '<\/a></li>';    

// This function picks up the click and opens the corresponding info window
function myclick(i) {
    google.maps.event.trigger(markersArray[i], "click");
}

このバインディングを行うために使用できる何かがあることを期待して、google.maps.Marker クラスを調べてきましたが、探しているものが見つかりませんでした。基本的に必要なのは、マーカーの addListener 関数、リンクに埋め込むことができる一意のタグまたは id 値です。これにより、jQuery find 呼び出しでリンクが強調表示され、どのリンクがクリックされたかを示すことができます。

私が過去に行ったことは、jQuery find によって返されたノードに addClass の呼び出しを追加することですが、これは機能しません。「要素の検査」を行うとリンクは正しく表示されますが、強調表示を行うために追加しようとしているクラスが追加されていません。

Google マップには、この機能がマップ結果に組み込まれています。提案をありがとう。

リンクノードにクラスを追加してクリックを処理しようとするコードは次のとおりです。

google.maps.event.addListener(marker, 'click', function() {
                    infowindow.setContent(address[0]);
                    infowindow.open(map, this);

$("#marker_links").find(".currentlySelected").removeClass("currentlySelected");
var linkItem = $("#marker_links").find("#li-" + markersArray.length-1);
linkItem.addClass('currentlySelected');                     


                });

currentlySelected は次のように定義されています。

nav li.currentlySelected {
    border: 0;
    background-color: white;
    color: #6d6e71;
}

linkItem をコンソールに記録すると、有効なオブジェクトのように見えるものが得られますが、addClass は固執しません...

4

2 に答える 2

0

マーカー クリック イベントにバインドする方法は次のとおりです。

google.maps.event.addListener(marker, 'click', function () {
    // highlight link here
});

フィドルを参照してください。

于 2013-10-10T14:07:12.773 に答える
0

リスト要素ごとに Backbone ビューを作成し、addListener クリック ハンドラー内からそのハイライト関数を呼び出して、各反復中に基礎となるモデルのマーカー配列の場所を設定することで、これを解決しました。フィドルのリンクをありがとう、それは私が間違っていたことを理解するのに役立ちました.

于 2013-10-12T01:30:07.300 に答える