0

私は多くの同様のスレッドを読んでいて、これを私のコードで機能させる方法がわかりません...アドバイスをいただければ幸いです。

AJAXを介して多数のマーカーを設定し、JSON結果で返されたデータからマップの下にテーブルを作成します。マップ上の対応するマーカーのクリックをエミュレートし、マーカーの実際のクリックに対してすでに定義されている情報ウィンドウを開くリンクをデータテーブルでクリック可能にしたい...

function display( json_results ) {

        $("#map").gmap3({action:'clear'});

        $("#map").gmap3(
            {action: 'init',
              options:{
                center:true,
                zoom:13,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: true,
                mapTypeControlOptions: {
                        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                },
                navigationControl: true,
                scrollwheel: true,
                streetViewControl: true
                }
            },
            {action: 'addMarkers',
                radius:100,
                markers: json_results,
                clusters:{
                            maxZoom: 10,
                            // This style will be used for clusters with more than 0 markers
                            20: {
                            content: '<div class="cluster cluster-1">CLUSTER_COUNT</div>',
                            width: 53,
                            height: 52
                            },
                            // This style will be used for clusters with more than 20 markers
                            50: {
                            content: '<div class="cluster cluster-2">CLUSTER_COUNT</div>',
                            width: 56,
                            height: 55
                            },
                            // This style will be used for clusters with more than 50 markers
                            100: {
                            content: '<div class="cluster cluster-3">CLUSTER_COUNT</div>',
                            width: 66,
                            height: 65
                            }

                    },
                marker: {
                    options: {
                        //icon: new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/icon_green.png'),
                        clickable: true
                        },
                    events:{
                        click: function(marker,event,data) {
                            $(this).gmap3({action: 'clear', name : 'infowindow'});
                            $(this).gmap3({action: 'addinfowindow', anchor: marker, options: { content:
                            '<div class="text"><strong><div style="color:navy;">' + data.itype + '</strong><br/><div id="address" snum="' + data.streetnum + '" snam="' + data.streetnam + '" styp="' + data.streettyp + '">'+ data.iaddress +'</div><br/>' + data.inum + '<br/>'+ data.datetime +'</div><hr>'+data.notes+'</div>'} })
                        },  
                        mouseover: function(marker, event, data){
                            $(this).gmap3(
                                { action:'clear', name:'overlay'},
                                { action:'addOverlay',
                                    latLng: marker.getPosition(),
                                    content:    '<div class="infobulle">' +
                                                '<div class="bg"></div>' +
                                                '<div class="text">' + data.itype +'</div>' +
                                                '</div>' +
                                                '<div class="arrow"></div>',
                                    offset: {
                                        x:-46,
                                        y:-73
                                    }
                                });
                        },
                        mouseout: function(){
                            $(this).gmap3({action:'clear', name:'overlay'});
                            }

                    } //end events
                } // end marker

                }
                ,{action:"autofit"} //end action

                );
            };

この関数は、ページが読み込まれたとき、および検索結果を含むフォームが送信されたときに、JQUERYから呼び出します。すべてが完璧に機能します。次に、対応するマーカーのクリックをトリガーするリンクをマップの外に追加します...

例：<a href="javascript:google.maps.event.trigger(markers[i], "click")">See This Infowindow</a>ここで、iはJSONで同時に渡す値であり、lat/longデータとinfowindowデータを上記の関数に渡します。マッピングのために送信されるデータの最初の配列は0、2番目の配列は1などと想定しているので、最初のリンクではi = 0、2番目のリンクではi=1などにします。

そのロジックが理にかなっているかどうかはわかりませんが、参照をマーカーに渡すためのより良い方法があるかもしれません...

誰かがこれで私を助けることができますか？たぶん、マーカーの値を既存のコードに渡すことができる単純な関数ですか？またはあなたが最善の方法だと思うものは何でも...

達人に感謝します！

4

1 に答える 1

1

クリックを処理するための独自の関数を定義してみましたか？

function myclick(i) {
    google.maps.event.trigger(markers[i],"click");
  }

と

 function setHTML() {
    var html = "";
    for (var i=0; i<markers.length; i++) {
        html += '<a href="javascript:myclick(' + i + ')">' + marker[i].id + '<\/a>';
    }
    document.getElementById("table").innerHTML = html;
  }
于 2012-08-14T09:44:03.480 に答える