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

您要为marker的每一行反复重新定义infowindow和$result。每次将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链接，该链接描述了很好地处理多个标记。

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

1 个答案: