Question

我正在使用Google Maps API V3和infoboxes，我正在尝试设置它，以便在任何给定时间只打开一个信息框。

我见过a ton of related threads，但我无法弄清楚如何修改它们以使其发挥作用。我隐约知道它需要绑定到

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 using this plugin，但我需要能够设置它们以匹配网站的特定外观和感觉，这是我甚至是唯一的原因首先打击InfoBoxes。

我真的很感激任何正确方向的指针！提前致谢。

Answer 1

你在for循环中的编码是罪魁祸首。您每次在循环中创建一个新的InfoBox，因此您将为每个标记留下新的InfoBox。

此代码是每次在循环中创建新InfoBox的代码：

                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实例，在循环之前编写上面的代码，这样你只需要初始化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);
                    }
                });

            }

Answer 2

使用gmaps.js，查看add marker option，插件易于使用。

Answer 3

我相信this示例正是您所寻找的。它显示了如何在多个标记之间共享单个信息窗口。

Google Maps API V3：打开新的信息框时关闭所有信息框

3 个答案: