如何使用谷歌地图隐藏 div答案

【问题标题】：How to hide divs using a Google Map如何使用谷歌地图隐藏 div
【发布时间】：2013-12-10 14:46:18
【问题描述】：

我正在使用 HTML、CSS 和 jQuery 创建一个网站，其中有一个 Google 地图（使用 Google Maps API V3）、地图上的一些标记以及页面底部的一些最初隐藏的 div .如果相应的标记在地图的当前视口内，我想做的是使这些 div 中的每一个都可见（即，如果我能看到标记，我也想看到 div，如果我没有看到标记，我不想看到 div）。任何帮助将不胜感激。

这些是 div，我想切换其可见性：

            <div class="bot-item r1">
                <h1>Athens</h1>
                <p>The capital city of Greece</p>
            </div>
            <div class="bot-item r2">
                <h1>Washington, D.C.</h1>
                <p>The capital city of the USA</p>
            </div>
            <div class="bot-item r3">
                <h1>Rome</h1>
                <p>The capital city of Italy</p>
            </div>
            <div class="bot-item r4">
                <h1>Berlin</h1>
                <p>The capital city of Germany</p>
            </div>
            <div class="bot-item r5">
                <h1>Paris</h1>
                <p>The capital city of France</p>
            </div>
            <div class="bot-item r6">
                <h1>Warsaw</h1>
                <p>The capital city of Poland</p>
            </div>

我将所有标记（总共 6 个标记）存储在一个数组中，并且我使用以下代码来尝试实现我想要的。不幸的是，它不起作用。（我将下面的代码附加到谷歌地图的“空闲”事件中。）

        for(var i = 0 ; i <= 5 ; i++){
            var j = i + 1;

            if(map.getBounds().contains(markers[i].getPosition()) == true){
                $(".r" + j).show();
            }
            else{
                $(".r" + j).hide();
            }
        }

【问题讨论】：

我刚刚编辑了我的问题，希望能帮助您更好地理解它。

标签： jquery html css google-maps

【解决方案1】：

要检测标记是否可见，您应该使用map.getBounds()，然后对于每个标记，您应该使用contains() 方法和Marker.getPosition() 测试当前地图边界是否包含我们的标记。

我创建了一个 JSFiddle 来向您展示一个工作示例：http://jsfiddle.net/glafarge/mbuLw/

【讨论】：