Question

我在Google地图控件中集成了复选框时遇到了一些问题。

在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地图控件中的复选框。

我能够在我的网站上做到这一点，并且我用更多的东西编写了代码。在该示例中，当您选中复选框时，会显示基本警报。在我的情况下，当我选中一个复选框时，Google地图标记会被隐藏，再次点击相同的复选框时，Google地图标记会再次显示。

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

我的问题是，我不知道如何检查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”是一个包含地图上打印的每个标记的数组。 “gmarkers [i] .id”是每个标记的类别，当点击复选框时，其上定义的id等于复选框的每个标记将隐藏/显示在地图上。

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;

现在，您可以使用新选项“display”来定义是否要初始化复选框;使用两个值：“none”或“block”。

然后，立即设置我自己的问题中显示的复选框选项，使用新选项“display”：

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

非常感谢@geocodezip !! ：）

带有复选框的Google地图自定义下拉菜单

1 个答案: