4

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

我见过很多 相关 的 线程，但我不 知道如何修改它们以使它们工作。我隐约知道它需要绑定到一个

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

EDIT: I should mention that I got this working with InfoWindows using this plugin, but I need to be able to style them to match a specific look and feel for a website, which is the only reason I'm even banging my head against InfoBoxes to begin with.

I would really appreciate any pointers in the right direction! Thanks in advance.

4

3 回答 3

4

Your coding in the for loop is the culprit here. You are creating a new InfoBox every time in the loop so you are left with new InfoBox with every marker.

This code is the one that creates a new InfoBox every time in the loop:

                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);

So to have a single instance of InfoBox, write the above code before the loop, so that you are only initializing the InfoBox once.

Since boxText.innerHTML is dynamic in the above code, set this content in the AddListener function.

So the final code should be- 

                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

Use gmaps.js, look add marker option, plugin it's easy to use.

于 2013-01-24T03:13:02.280 回答
0

I believe this example is what you're looking for. It shows how to share a single info window between multiple markers.

于 2013-01-24T03:22:51.523 回答