4

私は Google Maps API V3 とinfoboxesを使用しており、常に 1 つの infobox のみが開かれるように設定しようとしています。

関連するスレッドをたくさん見てきました が、それらを修正して機能させる方法がわかりません。にバインドする必要があることを漠然と知っています 

google.maps.event.addListener(map,'click',function() {

});

しかし、それは私が理解できる範囲のほとんどです。

これが私のコードです：

var boxList =[]

function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(35.542284,-76.856),
      zoom: 11,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);

    $(document).ready(function(){
        $.getJSON('test.json', function(data) {

                for (i = 0; i < data.length; i++) {
                    var item = data[i];
                    var myLatlng = new google.maps.LatLng(item.lat, item.longs);
                    var contentString = item.name;

                    // accidentally left this extraneous code in here...
                    // var infowindow = new google.maps.InfoWindow({
                    //    content: item.name
                    // });

                    var marker = new google.maps.Marker({
                        position: myLatlng,
                        map: map,
                        title: item.name,
                        icon: item.type + ".png"

                    }); // end add new marker

                    var boxText = document.createElement("div");
                    boxText.style.cssText = "border: 1px solid black;";
                    boxText.innerHTML = item.name;

                    var myOptions = {
                        content: boxText,
                        boxStyle: {
                              opacity: 0.75,
                              width: "280px"
                            },
                        closeBoxMargin: "12px 4px 2px 2px",
                    };


                    var ib = new InfoBox(myOptions);
                    boxList.push(ib);

                    google.maps.event.addListener(marker,'click',
                    (function(marker, i) {
                        return function() {
                            boxList[i].open(map, this);
                        }
                    })(marker, i));

                } //end for loop 

        }) // end getJSON

    }); // end jQuery

} // end initialize

編集:このプラグインを使用して InfoWindows でこれを動作させたことを言及する必要がありますが、Web サイトの特定のルック アンド フィールに合わせてスタイルを設定できる必要があります。これが、InfoBox に対して頭を悩ませている唯一の理由です。まず始めに。

正しい方向への指針を本当に感謝します！前もって感謝します。

4

3 に答える 3

4

forループでのコーディングが原因です。ループ内で毎回新しいインフォボックスを作成しているため、すべてのマーカーを含む新しいインフォボックスが残ります。

このコードは、ループ内で毎回新しいインフォボックスを作成するコードです。

                var boxText = document.createElement("div");
                boxText.style.cssText = "border: 1px solid black;";
                boxText.innerHTML = item.name;

                var myOptions = {
                    content: boxText,
                    boxStyle: {
                          opacity: 0.75,
                          width: "280px"
                        },
                    closeBoxMargin: "12px 4px 2px 2px",
                };


                var ib = new InfoBox(myOptions);

したがって、InfoBoxのインスタンスを1つにするために、ループの前に上記のコードを記述して、InfoBoxを一度だけ初期化するようにします。

上記のコードではboxText.innerHTMLが動的であるため、このコンテンツをAddListener関数で設定します。

したがって、最終的なコードは次のようになります- 

                for (i = 0; i < data.length; i++) {
                var item = data[i];
                var myLatlng = new google.maps.LatLng(item.lat, item.longs);
                var contentString = item.name;

                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: item.name,
                    icon: item.type + ".png"

                }); // end add new marker
              AddInfoBox(marker, contentString); //function call
            } //end for loop 

            function AddInfoBox(myMarker, content)
            {
                google.maps.event.addListener(myMarker,'click',function() {
                        ib.setContent(content); //not sure about this statement
                        ib.open(map, this);
                    }
                });

            }
于 2013-01-24T05:26:41.113 に答える
0

gmaps.jsを使用し、マーカーの追加オプションを見て、使いやすいプラグインを使用します。

于 2013-01-24T03:13:02.280 に答える
0

この例はあなたが探しているものだと思います。複数のマーカー間で 1 つの情報ウィンドウを共有する方法を示します。

于 2013-01-24T03:22:51.523 に答える