如何使用Google地图隐藏div

Question

我正在使用HTML，CSS和jQuery创建一个网站，其中有一个谷歌地图（使用谷歌地图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个标记）存储在一个数组中，并且我使用以下代码来尝试实现我想要的。不幸的是，它不起作用。 （我将下面的代码附加到Google地图的“空闲”事件中。）

        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();
            }
        }

Answer 1

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

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