Question

Rich-maker文档https://googlemaps.github.io/js-rich-marker/reference.html

当另一个信息窗口打开时，Infowindow能够关闭，所以信息窗口会互相覆盖如何解决这个覆盖？

这里我使用foreach加载多个制造商，当我点击制造商时   icon它在信息视图窗口中打开制造商内容

 var marker = new RichMarker({
                                position: new google.maps.LatLng(<?php echo $row['latitude'];?>, <?php echo $row['longitude'];?>),
                                map: map,
                                draggable: false,
                                content: '<div class="my-marker"><div></div>' + '<div><img src="<?php echo $row["profile_image_thumb"];?>" height="27" width="36" style="margin:7px 0px 0px 2px; border-radius:3px;"  /></div></div>'
                              });

                            markers.push(marker);
                            LatLngList.push(new google.maps.LatLng (<?php echo $row['latitude'];?>,<?php echo $row['longitude'];?>));


                            marker.setFlat(!marker.getFlat());

                            // Add information window
                            var point = new google.maps.LatLng(<?php echo $row['latitude'];?>, <?php echo $row['longitude'];?>);

                            var user_address = '';
                            <?php if ($row['street_number'] != '') { ?>
                                var user_address = '<?php echo trim(ltrim(ltrim($row['address'],$row['street_number']),',')); ?>';
                            <?php } else { ?>
                                var user_address = '<?php echo $row['address']; ?>';
                            <?php } ?>

                            marker.info = new google.maps.InfoWindow({
                              position: new google.maps.LatLng(<?php echo $row['latitude'];?>, <?php echo $row['longitude'];?>),
                              content: '<div id="content"><div class="panel-heading"><h3 class="panel-title">Photographer Detail</h3></div><div class="panel-body text-center"><span> <p><img src="<?php echo $row["profile_image_thumb"];?>" height="50" width="50" > </p> <p><b>&nbsp;&nbsp;Name : </b><?php echo $row["username"];?><br><b>&nbsp;&nbsp;Location : </b>'+user_address+'</p>'+'<p><a class="btn btn-default btn-sm" href="<?php echo site_url();?>photographer/get_photographers_data/<?php echo $row["user_id"]; ?>/V" >View Profile</a> </p>'+'</span></div></div>'
                            });

                            google.maps.event.addListener(marker, 'click', function() {
                              //marker.info.open(map, marker);
                              var marker_map = this.getMap();     
                              this.info.open(marker_map);
                            });

Answer 1

而不是为每个标记创建多个infowindows，您可以创建一个全局infowindow。在每个标记点击，您只需要更改信息窗口内的内容..

    <script>
//Called on the intiial page load.
            var map;
            var markers = [];
            var LatLngList = [];
            var infowindow;
            var content;
            function init() {
                geocoder = new google.maps.Geocoder();
                var mapCenter = new google.maps.LatLng(23.034606, 72.560218);
                map = new google.maps.Map(document.getElementById('gmaps-markers'), {
                    zoom: 10,
                    center: mapCenter,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });
<?php
foreach ($res as $row)
{
    if ($row['latitude'] != '' && $row['longitude'] != '')
    {
        ?>
                        var user_address = '';
        <?php
        if ($row['street_number'] != '')
        {
            ?>
                            var user_address = '<?php echo trim(ltrim(ltrim($row['address'], $row['street_number']), ',')); ?>';
            <?php
        }
        else
        {
            ?>
                            var user_address = '<?php echo $row['address']; ?>';
        <?php } ?>

                        content = '<div id="content"><div class="panel-heading"><h3 class="panel-title">Photographer Detail</h3></div><div class="panel-body text-center"><span> <p><img src="<?php echo $row["profile_image_thumb"]; ?>" height="50" width="50" > </p> <p><b>&nbsp;&nbsp;Name : </b><?php echo $row["username"]; ?><br><b>&nbsp;&nbsp;Location : </b>' + user_address + '</p>' + '<p><a class="btn btn-default btn-sm" href="<?php echo site_url(); ?>photographer/get_photographers_data/<?php echo $row["user_id"]; ?>/V" >View Profile</a> </p>' + '</span></div></div>';

                        var marker = new RichMarker({
                            position: new google.maps.LatLng(<?php echo $row['latitude']; ?>, <?php echo $row['longitude']; ?>),
                            map: map,
                            draggable: false,
                            content: '<div class="my-marker"><div></div>' + '<div><img src="<?php echo $row["profile_image_thumb"]; ?>" height="27" width="36" style="margin:7px 0px 0px 2px; border-radius:3px;" /></div></div>',
                            info_content: content
                        });
                        markers.push(marker);
                        LatLngList.push(new google.maps.LatLng(<?php echo $row['latitude']; ?>,<?php echo $row['longitude']; ?>
                        ));
                        marker.setFlat(!marker.getFlat()); // Add information window

                        var point = new google.maps.LatLng(<?php echo $row['latitude']; ?>, <?php echo $row['longitude']; ?>);

                        infowindow = new google.maps.InfoWindow();
                        google.maps.event.addListener(marker, 'click', function () {
                            infowindow.setContent(this.info_content);
                            infowindow.open(map, this);
                        });
        <?php
    }
}
?>
            }
            init();
        </script>

如何关闭richmarker infoview？

1 个答案: