如何将InfoBoxes与googlemaps实用程序库v3绑定到循环中的点击侦听器

How to tie InfoBoxes to click listeners in for loop with google maps utility library v3?

本文关键字：循环 绑定 侦听器 v3 程序库 InfoBoxes googlemaps      更新时间：2023-09-26

我正在使用Google Maps Utility Library v3在地图上放置多个可点击的标记。单击某个Marker时，应打开该特定Marker唯一的InfoBox。

我能够在映射上使用每个标记上的'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>

有人知道我哪里错了吗？或者我该怎么做？

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

<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>
相关文章：