Question

我有一个使用谷歌地图的网站。我在地图上放置了大量不同类型的图标。因此，我希望能够过滤显示的内容。要做到这一点，我想要一个带有复选框的下拉列表。这与demo dropdown的示例非常相似。我尝试使用它作为一个例子，但有许多功能没有记录（我假设它们在一些其他无法访问的文件中。当我保存源并打开它时，下拉列表不起作用。）。< / p>

我只需要一个简单的列表并创建一个嵌入地图的下拉列表。我有一个示例，它使用以下方法创建一组复选框。这些盒子是用：

制作的

var legend = document.getElementById('legend');
for (var key in names) {
    var type = names[key];
    var name = type.name;
    var id = type.id;
    var div = document.createElement('div');
    div.innerHTML = '<input type="checkbox" name="' + id + '" id="' + id + '" checked="checked" />' + name;
    legend.appendChild(div);
}

，html如下：

<body >
      <div id="map_canvas" > </div>
         <div id="legend" ></div>
</body>

我只想要一个简单的方法。只会有少数选择，但这并没有什么区别。

这是样式代码

   <style>
  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  #legend {
    font-family: Arial, sans-serif;
    background: #fff;
    padding: 10px;
    margin: 10px;
    border: 1px solid #000;
    width: 10%;
  }
  #legend h3 {
    margin-top: 0;
  }
  #map_canvas {
    height: 100%;
}
  #legend img {
    vertical-align: middle;
  }
  /* Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
 .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
 .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
 .dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

</style>

这里是html

<div class="dropdown">

下拉帐户机会领导

Answer 1

此处的示例适合我，Customized dropdown inside googlemap

您只需要检查源代码，从这些文件中获取js和css代码，位于顶部的 gdropdown.css gdropdown.js 。一切都会好的。

如何创建谷歌地图下拉列表

1 个答案: