谷歌地图标记加载最后一条记录

Question

我正在尝试向谷歌地图添加一组标记，每个标记都有一个信息窗口。我混合使用 php 和 javascript 来执行此操作，php 从数据库中获取所有记录，然后 javascript 将所有标记添加到地图中，并使用从数据库中获取的坐标。

这是我目前所拥有的：

<script type="text/javascript">
        function initialize() {

            var latlng = new google.maps.LatLng(<?=$lat?>, <?=$long?>);

            var settings = {
                zoom: 12,
                center: latlng,
                mapTypeControl: false,
                navigationControl: true,
                navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
                mapTypeId: google.maps.MapTypeId.ROADMAP};
            var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

            var postcodeLogo = new google.maps.MarkerImage('/images/postcode_marker.png',
                new google.maps.Size(32,37),
                new google.maps.Point(0,0),
                new google.maps.Point(15,34)
            );

            var propertyLogo = new google.maps.MarkerImage('/images/property_marker.png',
                new google.maps.Size(32,37),
                new google.maps.Point(0,0),
                new google.maps.Point(15,34)
            );

            var infowindow = new google.maps.InfoWindow();  

            <?
            foreach ($results as $grid_refs)
            {
            ?>          

                    var propPos = new google.maps.LatLng(<?=$grid_refs['grid_ref']?>);

                    propMarker = new google.maps.Marker({
                        position: propPos,
                        map: map,
                        icon: propertyLogo,
                        title:"<?=$grid_refs['sd_name']?>",
                        zIndex: 3});

                    var contentString = '<div style="font-weight:bold;"><?=$grid_refs['sd_name']?></div><div><img src="www.imagelink.com/<?=$grid_refs['image_filename']?>"></div><div><a href="http://www.pagelink-<?=$grid_refs['property_id'];?>/" target="-blank">See full details</a></div>';

                    google.maps.event.addListener(propMarker, 'click', function() {
                            infowindow.setContent(contentString);
                            infowindow.open(map,this);
                        });

            <?
            }
            ?>


            var positionPos = new google.maps.LatLng(<?=$lat?>, <?=$long?>);

            var positionMarker = new google.maps.Marker({
                position: positionPos,
                map: map,
                icon: postcodeLogo,
                title:"<?=$_GET['searchpostcode']?>",
                zIndex: 3});


        }
    </script>

positionMarker 是用户输入他们想要搜索的邮政编码的地方。 propMarker 标记地图上的所有地点，然后显示。

在代码中显示了所有信息，但是在地图上每个信息窗口都会打开最后检索到的记录 - 我希望它加载与该标记相关的信息。

我看过这个问题：

Google Maps infoWindow only loading last record on markers

这会起作用，但我似乎无法让 js for 循环与 php foreach 一起使用，我已经在 php foreach 内外尝试过。

我认为我需要的是每次创建标记时更改变量名称和 contentString 的 foreach 循环，但我似乎可以让它工作？

非常感谢任何帮助！

Answer 1

发生的情况是您循环所有标记，但在最后一次迭代中，您设置到 contentString 中的内容将成为随后用于所有点击事件的内容。

相反，将其委托给另一个函数（或使用闭包），例如

            <?
            foreach ($results as $grid_refs)
            {
            ?>          

                    var propPos = new google.maps.LatLng(<?=$grid_refs['grid_ref']?>);

                    propMarker = new google.maps.Marker({
                        position: propPos,
                        map: map,
                        icon: propertyLogo,
                        title:"<?=$grid_refs['sd_name']?>",
                        zIndex: 3});

                    var contentString = '<div style="font-weight:bold;"><?=$grid_refs['sd_name']?></div><div><img src="www.imagelink.com/<?=$grid_refs['image_filename']?>"></div><div><a href="http://www.pagelink-<?=$grid_refs['property_id'];?>/" target="-blank">See full details</a></div>';

                    // add an event listener for this marker
                    bindInfoWindow(propMarker, map, infowindow, contentString);
            <?
            }
            ?>

然后添加一个新函数：

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