Question

我已经阅读了数百个网站的帖子 - 所有这些都非常有帮助，但我被困在许多其他人的地方 - 关闭问题。我的地图加载，我的标记加载，但臭名昭着的信息窗口始终显示最后一条记录的数据。

http://harvest.cals.ncsu.edu/applications/kim_test/map/map_test.cfm

这是我的代码：

<!DOCTYPE html>
<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <title>Google Maps Multiple Markers</title> 
    <script src="http://maps.google.com/maps/api/js?sensor=false" 
        type="text/javascript"></script>
    </head> 
<body>
    <div id="map" style="width: 700px; height: 700px;"></div>
    <script type="text/javascript">
        var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(35.8189, -78.6447),
        mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        <cfquery name="alumniMap" datasource="mydatasource" maxrows="10">
        Select MapLatitude, mapLongitude, ID, entity_name
        From tbl_jeffScholarsAlumni
        Order by ID
        </cfquery>

        <cfset p = 1>

        <cfloop query="alumniMap" >
            <cfoutput>
                var #toScript(alumniMap.mapLatitude, "latitude")#;
                var #toScript(alumniMap.mapLongitude, "longitude")#;
                var #toScript(alumniMap.ID, "ncsuID")#;
                var #toScript(alumniMap.entity_name, "ncsupeep")#;
                var #toScript(p, "thisMark")#;          
            </cfoutput> 
            var locations = [
                ['this is me ' + ncsupeep + '...' , latitude, longitude, thisMark],
            ];
            <cfset p = p + 1>

            var infowindow = new google.maps.InfoWindow();
            var marker, i;

            for (i = 0; i < locations.length; i++) 
            {  
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    map: map
                });
            }

            for (i = 0; i < locations.length; i++) {
                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow.setContent(locations[i][0]);
                    infowindow.open(map, marker);
                }
                })(marker, i));
            }

        </cfloop>
    </script>
</body>
</html>

Answer 1

修改此代码：

for (i = 0; i < locations.length; i++) {
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));
}

要：

for (i = 0; i < locations.length; i++) {
    bindInfoWindow(marker, map, infowindow, locations[i][0]);
}

添加一个新功能：

function bindInfoWindow(marker, map, infowindow, strDescription) {
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(strDescription);
        infowindow.open(map, marker);
    });
}

ColdFusion 10和多个Google Map infowindows

1 个答案: