javascript - 带有复选框的谷歌地图自定义下拉菜单

Question

我对 Google map 控件中集成的复选框有一点疑问。

在 Google Maps API v3 文档中，它说您可以使用“自定义控件”(https://developers.google.com/maps/documentation/javascript/examples/control-custom)，但没有关于下拉菜单的内容。我在网上冲浪，发现了 Briana Sullivan 的这个例子:

http://vislab-ccom.unh.edu/~briana/examples/gdropdown/index.html

它显示了一个下拉菜单，其中包含集成在 Google map 控件中的复选框。

我能够在我的网站上做到这一点，并且我在编码中添加了更多内容。在该示例中，当您选中一个复选框时，会显示一个基本警报。在我的例子中，当我选中一个复选框时，谷歌地图标记被隐藏，当再次点击同一个复选框时，谷歌地图标记再次可见。

我使用下拉菜单，每个标记类别都有一个复选框。这样，我可以在我的 map 中的每个标记的每个类别中显示/隐藏类别。

我的问题是我不知道如何从 Javascript 中选中复选框，也不知道如何将这些复选框设置为默认选中。

你能帮我勾选那些复选框而不用鼠标点击它们吗？

我在这里不使用 jsfiddle 示例，因为您拥有我上面链接的 Briana 示例中的所有内容。

谢谢!!

编辑:添加代码...

var checkOptions0 = {
    gmap: map,
    title: "aaa",
    id: "1",
    label: "aaa",
    action: function(){
        showhide("1");
    }
}
var check0 = new checkBox(checkOptions0);
var checkOptions1 = {
    gmap: map,
    title: "bbb",
    id: "2",
    label: "bbb",
    action: function(){
        showhide("2");
    }
}
var check1 = new checkBox(checkOptions1);
var ddDivOptions = {
    items: [check0, check1],
    id: "myddOptsDiv"
}
var dropDownDiv = new dropDownOptionsDiv(ddDivOptions);               
var dropDownOptions = {
    gmap: map,
    name: 'Boxes',
    id: 'ddControl',
    title: 'Boxes',
    position: google.maps.ControlPosition.TOP_RIGHT,
    dropDown: dropDownDiv
}
var dropDown1 = new dropDownControl(dropDownOptions);

function showhide(category) {
    for (var i=0; i<gmarkers.length; i++) {
        if (gmarkers[i].id == category) {
            estado = gmarkers[i].getVisible();
            gmarkers[i].setVisible(!estado);
        }
    }
}

“gmarkers”是一个包含 map 上打印的每个标记的数组。 "gmarkers[i].id"是每个标记的类别，当单击复选框时，其上定义的 id 等于复选框的每个标记都将在 map 上隐藏/显示。

Answer 1

终于找到解决办法了。我觉得前几天我没那么聪明 :D

Briana 使用的脚本是:http://vislab-ccom.unh.edu/~briana/examples/gdropdown/gdropdown.js

对其进行修改，并在其后添加新行

bDiv.id = options.id;

这样:

bDiv.id = options.id;
bDiv.style.display = options.display == "" ? "none" : options.display;

现在，您可以定义是否要使用新选项“显示”初始化复选框；使用两个值:“无”或“阻止”。

然后，现在设置我自己的问题中显示的复选框选项，使用新选项“显示”:

var checkOptions0 = {
    gmap: map,
    title: "aaa",
    id: "1",
    label: "aaa",
    action: function(){
        showhide("1");
    },
    display: 'block'
}

还是谢谢@geocodezip !! :)