如何在谷歌地图标记上显示信息框

Question

我有从数据库中获取数据并根据它显示标记的代码，但是我遇到了信息框的问题。他们没有得到正确显示。 例如，有 2 个标记。如果我单击第一个标记，则信息框会正确显示，然后在关闭它后，如果我单击另一个标记，则第一个标记的信息框会显示在第一个标记上，而第二个标记上不会显示任何内容。如果有人可以帮助我，将不胜感激

<?php 
    require 'connection.php'; 
    $parent_id = $_GET['country'];
    $fid = $_GET['fid']; 
        $sql = "SELECT * FROM features_for_office WHERE parent_id='".$parent_id."' and fid='".$fid."' ";
        $result = mysqli_query($con, $sql);
        if (mysqli_num_rows($result) > 0) 
            {?>
                <script>
                    var myCenter=new google.maps.LatLng(51.508742,-0.120850);
                    function initialize()
                    {
                        var mapProp = {
                          center:myCenter,
                          zoom:2,
                          mapTypeId:google.maps.MapTypeId.ROADMAP
                          };

                        var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
                        <?
                            while($row = mysqli_fetch_assoc($result)) 
                                {
                                    $officeid= $row["officeid"];
                                    $sql1 = "SELECT * FROM register_office WHERE id='".$officeid."' ";
                                    $result1 = mysqli_query($con, $sql1);
                                    if (mysqli_num_rows($result1) > 0) 
                                        {
                                            while($row1 = mysqli_fetch_assoc($result1)) 
                                                {
                                                    $officelat= $row1["lat"];
                                                    $officelon= $row1["lon"];
                                                    $officetitle= $row1["officetitle"];
                                                    ?>
                                                    var marker=new google.maps.Marker({
                                                    position:new google.maps.LatLng(<?php echo $officelat; ?>, <?php echo $officelon; ?>),
                                                    });
                                                    marker.setMap(map);
                                                    var infowindow = new google.maps.InfoWindow({
                                                    content:"<?php echo $officetitle;?>"
                                                    });
                                                    google.maps.event.addListener(marker, 'click', function() {
                                                    infowindow.open(map,marker);
                                                    });
                                              <?}
                                        }
                                }?>
                    }
                    google.maps.event.addDomListener(window, 'load', initialize);
                </script>
            <?}
        mysqli_close($con);     
?>

Answer 1

对于$result 的每一行，您一遍又一遍地重新定义marker 和infowindow。每次将 marker 定义为数组时推送，然后将事件侦听器添加到标记数组元素。

例如：

...
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var infowindow = new google.maps.InfoWindow();
var index = 0;
var markerArray = [];

...

while($row1 = mysqli_fetch_assoc($result1)) 
{
   $officelat= $row1["lat"];
   $officelon= $row1["lon"];
   $officetitle= $row1["officetitle"];
?>
   var marker=new google.maps.Marker({
      position:new google.maps.LatLng(<?php echo $officelat; ?>, <?php echo $officelon; ?>)
   });

   marker.setMap(map);

   markerArray.push(marker);

   google.maps.event.addListener(markerArray[index], 'click', function() {
      infowindow.setContent("<?php echo $officetitle;?>");
      infowindow.open(map,marker[index]);
   });

   index++;
<?}
...

这只是一个基本的实现，你可以参考this链接，它很好地描述了处理多个标记。