如何通过google maps实用程序库v3将InfoBox绑定到for循环中的侦听器？

Question

我正在使用Google Maps Utility Library v3在地图上放置多个可点击标记。点击Marker后，应该会针对特定InfoBox打开Marker唯一身份。

我可以在地图上填充标记，每个标记上都有一个'click'事件监听器，但我无法将每个特定InfoBox绑定到各自的Marker。我点击的每个图标都会打开我在循环中创建的最后一个InfoBox。

这是我的代码：

<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script>

<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>


<script>
        function initialize() {
            var crimes = <?php echo json_encode($crimes); ?>;
            var count = crimes.length;

            var myCoordinates = new google.maps.LatLng( 40.7127837, -74.00594130000002 );
            var myOptions = {
                                zoom: 14,
                                center: myCoordinates,
                                mapTypeId: google.maps.MapTypeId.ROADMAP
                            };

            var marker, infobox;

            var map = new google.maps.Map( document.getElementById( 'map-canvas' ), myOptions );

            for(x = 0; x < count; x++)
            {
                var coordinates = new google.maps.LatLng( parseFloat(crimes[x].lat), parseFloat(crimes[x].lng) );
                marker = new MarkerWithLabel({
                    title: crimes[x].type,
                    clickable: true,
                    position: coordinates,
                    icon: ' ',
                    map: map,
                    labelContent: '<a type="button" class="btn btn-transparent fa fa-ambulance" style="color:rgba(144,15,15,0.8);"></a>',
                    labelClass: "labels"
                });


                infobox = new InfoBox({
                    content: crimes[x].details,
                    disableAutoPan: true,
                    isHidden: false,
                    maxWidth: 150,
                    pane: "floatPane",
                    enableEventPropagation: true,
                    pixelOffset: new google.maps.Size(-140, 0),
                    zIndex: null,
                    boxStyle: {
                        border: "2px solid black",
                        background: "#333",
                        color: "#FFF",
                        opacity: 0.85,
                        padding: ".5em 1em",
                        width: "200px",
                    },
                    closeBoxMargin: "2px 2px 2px 2px",
                    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
                    infoBoxClearance: new google.maps.Size(1, 1)
                });


                listener = new google.maps.event.addListener(marker,  'click', function() {
                    infobox.open(map, this);//I think this is where I'm doing it wrong. How do I tie each specific infobox to its respective click listener?
                    map.panTo(coordinates);
                });

                marker.setMap( map );
            }
        }


        google.maps.event.addDomListener(window, 'load', initialize);

</script>

有谁知道我哪里出错了，或者我怎么能这样做？

Answer 1

我做了一些重构，它神奇地开始正常工作：

<script>
        function initialize() 
        {
            var crimes = <?php echo json_encode($crimes); ?>;
            var count = crimes.length;

            var uaCampusCoordinates = new google.maps.LatLng( 40.7127837, -74.00594130000002 );
            var myOptions = {
                                zoom: 14,
                                center: uaCampusCoordinates,
                                mapTypeId: google.maps.MapTypeId.ROADMAP
                            };

            var map = new google.maps.Map( document.getElementById( 'map-canvas' ), myOptions );

            for(x = 0; x < count; x++)
            {
                var coordinates = new google.maps.LatLng( parseFloat(crimes[x].lat), parseFloat(crimes[x].lng) );
                var markerTitle = crimes[x].type;
                var infoBoxContent = crimes[x].details;

                marker = createMarker(map, coordinates, markerTitle);
                infobox = createInfoBox(infoBoxContent, coordinates);
                listener = createListener(map, marker, infobox, coordinates);
            }
        }

        google.maps.event.addDomListener(window, 'load', initialize);

        function createMarker(map, coordinates, markerTitle)
        {
            marker = new MarkerWithLabel({
                title: markerTitle,
                clickable: true,
                position: coordinates,
                icon: ' ',
                map: map,
                labelContent: '<a type="button" class="btn btn-transparent fa fa-ambulance" style="color:rgba(144,15,15,0.8);"></a>',
                labelClass: "labels" 
            });

            marker.setMap( map );

            return marker;
        }

        function createInfoBox(infoBoxContent, coordinates)
        {
            //need to make sure this infobox doesnt get overwritten
            infobox = new InfoBox({
                content: infoBoxContent,
                position: coordinates,
                disableAutoPan: true,
                isHidden: false,
                maxWidth: 150,
                pane: "floatPane",
                enableEventPropagation: true,
                pixelOffset: new google.maps.Size(-140, 0),
                //could do a counter for z index to make more relevant markers show up on top, just remember to sort according to relevancy first
                zIndex: null,
                boxStyle: {
                    border: "2px solid black",
                    background: "#333",
                    color: "#FFF",
                    opacity: 0.85,
                    padding: ".5em 1em",
                    width: "200px",
                },
                closeBoxMargin: "2px 2px 2px 2px",
                closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
                infoBoxClearance: new google.maps.Size(1, 1)
            });

            return infobox;
        }

        function createListener(map, marker, infobox, coordinates)
        {
            listener = marker.addListener('click', function() {
                infobox.open(map, this);
                map.panTo(coordinates);
            });

            return listener;
        }

</script>