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

Google Maps custom dropdown menu with checkboxes

本文关键字：自定义 下拉菜单 谷歌地图 复选框      更新时间：2023-09-26

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

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

我

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

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

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

终于找到了解决方案。我想我前几天没有那么聪明:D

布里亚娜使用的脚本是：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"。

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

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

无论如何，谢谢@geocodezip！！ :)

相关文章：