谷歌地图控制按钮

Question

http://jsfiddle.net/9hYv4/1

我正在尝试控制我的地图的标签——打开和关闭。

我似乎无法让它工作。参见上面的小提琴。

我已经定义了我的按钮来调用函数，以及显示或不显示标签的函数。

这里是一些代码： JAVASCRIPT：

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
    setAllMap(null);
}

// Shows any markers currently in the array.
function showMarkers() {
    setAllMap(map);
}

HTML：

<div id="panel">
    <input onclick="clearMarkers();" checked="checked" type="checkbox" value="Hide Markers"><label>Hide Markers</label>
    <input onclick="showMarkers();" type="button" value="Show All Markers">
</div>

编辑

请看这里： http://jsfiddle.net/9hYv4/10/

我不知道我在想什么。我所追求的是一个切换隐藏/显示图标的复选框。因此，选中时图标显示，未选中时图标隐藏。

fiddle 和 jsbin 中的代码运行良好，但是从我发布的 fiddle 中可以看出，图标分组（markerCluster）不再起作用。

点击小提琴并缩小查看。这些图标应该聚集在一起。

我希望这很清楚？

我非常感谢迄今为止的帮助 :) 我非常感谢您花时间帮助我。

总结一下：我在使用复选框按钮隐藏/显示图标切换之后。并恢复集群功能。

非常感谢:)

Answer 1

您的代码中有一些错误。一个与不可见的变量连接，应设置为全局：

var map,
    markers = [];

下一个与复选框相连。显示/隐藏序列与复选框和按钮的状态组合相关（有时复选框未选中并且标记被隐藏）。最好对复选框值做出反应。见新功能handleMarkers：

function handleMarkers() {
    if (cBox.checked) {
        clearMarkers();
    } else {
        showMarkers();
    }
}

<input onclick="handleMarkers();" id='cBox' checked="checked" type="checkbox" value="Hide Markers"><label>Hide Markers</label>

并且标记在更改缩放时再次显示。它与 MarkerClusteres 相连。必须添加新的事件监听器：

map.fitBounds(bounds);

google.maps.event.addListener(map, 'zoom_changed', function() {
    console.log('zoom changed!');
    if (cBox.checked) {
        markerCluster.clearMarkers();
    } else {
        markerCluster = new MarkerClusterer(map, markers, clusterOptions);
    }
})

查看更新的example at jsbin：更改了clearMarkers() 和showMarkers() 函数以处理标记簇。

更新：此version at jsBin 不会创建新的标记聚类器对象，而只是从现有对象中清除/添加标记。应该是更好的选择。

缩放更改事件处理程序：仅当 markerCluster 为空时才恢复标记：

google.maps.event.addListener(map, 'zoom_changed', function() {
    console.log('zoom changed!');
    if (cBox.checked) {
        markerCluster.clearMarkers();
    } else {
        var totArray = markerCluster.getTotalMarkers();
        if (totArray == 0) {
            markerCluster.addMarkers(markers);
        }
        //markerCluster = new MarkerClusterer(map, markers, clusterOptions);
    }
})