Question

我遇到一个问题，即弹出窗口中的内容（点击标记时）显示我上次记录的内容。

我找到了一些帮助here，但我仍有问题。

这是我的代码

collection.js

[
{
    "lat": "-25.363882",
    "lng": "131.044922",
    "category": "cat1",
    "title": "Heading #1",
    "description": "desc1",
    "imageurl": "http://ursispaltenstein.ch/blog/images/uploads_img/national_geographic_wallpaper_1.jpg",
    "pageLink": "http://www.google.com"
},
{
    "lat": "-26.363882",
    "lng": "200.044922",
    "category": "cat2",
    "title": "Heading #2",
    "description": "desc2",
    "imageurl": "http://www.creativepics.org/wp-content/uploads/2009/10/National-Geographic-Wallpapers-002.jpg",
    "pageLink": "http://www.google.com"
}
,
{
    "lat": "-28.363882",
    "lng": "81.044922",
    "category": "cat3",
    "title": "Heading #3",
    "description": "desc3",
    "imageurl": "http://blog.rapidsea.com/wp-content/uploads/2008/03/20080316-bora-bora-national-geographic.jpg",
    "pageLink": "http://www.google.com"
}
]

页面javascript

var pointMap = { map: null }

$(function () {
    pointMap.init('#map_canvas', new google.maps.LatLng(0, 0), 2);
    pointMap.placeMarkers('collection.js');
});

pointMap.init = function (selector, latLng, zoom) {
    var myOptions = {
        zoom: zoom,
        center: latLng,
        mapTypeId: google.maps.MapTypeId.HYBRID
    }
    this.map = new google.maps.Map($(selector)[0], myOptions);
}

pointMap.placeMarkers = function (filename) {
    $.getJSON(filename, function (data) {
         for (var x = 0; x < data.length; x++) {
             var location = data[x];

             var point = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lng));
             var marker = new google.maps.Marker({
                 position: point,
                 map: pointMap.map,
                 title: location.title
             });

             var popupContent = '<div id="locationContent">' +
                                      '<div>' + location.category + '</div>' +
                                      '<div>' + location.title + '</div>' +
                                      '<div>' + location.description + '</div>' +
                                      '<div><a href="' + location.pageLink + '">See This Story >></a></div>' +
                                      '<div><img width="250" src="' + location.imageurl + '" /></div>' +
                                 '</div>';

             var infoWindow = new google.maps.InfoWindow();
                    google.maps.event.addListener(marker, 'click', function () {
                        infoWindow.setContent(popupContent);
                        infoWindow.open(pointMap.map, this);
                    });
                }

       });
}

HTML

<!DOCTYPE html>
<html>
<head>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
   // javascript from above
</script>
</head>
<body>
    <div id="map_canvas"></div>

</body>
</html>

标记全部加载到正确的位置和窗口都在正确的位置打开，但InfoWindow（popupContent）中加载的内容是我所有标记的最后一条记录。

感谢您的帮助

Answer 1

所以我反而将infoWIndow的创建推送到一个单独的函数而不是循环，它似乎工作。

更新代码

pointMap.placeMarkers = function (filename) {
        $.getJSON(filename, function (data) {
            for (var x = 0; x < data.length; x++) {
                var location = data[x];

                var point = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lng));
                var marker = new google.maps.Marker({
                    position: point,
                    map: pointMap.map,
                    title: location.title
                });

                var popupContent = '<div id="locationContent">' +
                                        '<div>' + location.category + '</div>' +
                                        '<div>' + location.title + '</div>' +
                                        '<div>' + location.description + '</div>' +
                                        '<div><a href="' + location.pageLink + '">See This Story >></a></div>' +
                                        '<div><img width="250" src="' + location.imageurl + '" /></div>' +
                                    '</div>';

                createInfoWindow(marker, popupContent);
            }

        });
    }

    var infoWindow = new google.maps.InfoWindow();
    function createInfoWindow(marker, popupContent) {
        google.maps.event.addListener(marker, 'click', function () {
            infoWindow.setContent(popupContent);
            infoWindow.open(pointMap.map, this);
        });
    }

动态谷歌地图InfoWindow在循环中加载最后一条记录的内容

1 个答案: