谷歌地图控制按钮

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/

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

小提琴和jsbin中的代码工作得很好，但是可以在我的贴子小提琴中看到，图标（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不会创建新的标记clusterer对象，而只是清除/添加标记从/到现有的一个。应该是更好的选择。

缩放变化事件处理程序：恢复标志只有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); 
    } 
})