jquery - 如何使用谷歌地图隐藏 div

Question

我正在使用 HTML、CSS 和 jQuery 创建一个网站，其中有一个 Google map (使用 Google Maps API V3)、 map 上的一些标记以及页面底部最初隐藏的一些 div .如果相应的标记在 map 的当前视口(viewport)内，我想做的是使每个 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 map 的“空闲”事件。)

        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() ，然后对于每个标记，您应该使用以下方法测试当前 map 边界是否包含我们的标记:contains()方法和Marker.getPosition() .

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