2

我对谷歌地图控件中集成的复选框有一点问题。

在 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 Maps 标记被隐藏，当再次单击同一个复选框时，Google Maps 标记再次可见。

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

我的问题是我不知道如何从 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 等于复选框的标记将被隐藏/显示在地图上。

4

1 回答 1

2

终于找到了解决办法。我想我前几天没那么聪明: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;

现在，您可以定义是否要使用新选项“显示”来启动选中的复选框；使用两个值：“none”或“block”。

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

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

无论如何谢谢@geocodezip！:)

于 2013-11-01T11:35:24.203 回答