javascript - 谷歌地图控制按钮

Question

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

我正在尝试控制我的 map 的标签 - 即开启和关闭。

我似乎无法让它工作。参见上面的 fiddle 。

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

部分代码如下: 脚本:

// 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) 不再有效。

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

我希望这是清楚的？

我真的很感谢到目前为止的帮助 :) 我真的很感谢花时间来帮助我。

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

非常感谢你:)

Answer 1

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

var map,
    markers = [];

下一个与checkbox连接。显示/隐藏序列与复选框和按钮状态的组合有关(有时复选框未选中并且标记被隐藏)。最好对复选框值使用react。查看新函数 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);
    }
})