如何创建谷歌地图下拉菜单答案

【问题标题】：how to create google maps dropdown如何创建谷歌地图下拉菜单
【发布时间】：2016-04-29 18:19:45
【问题描述】：

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

我只需要一个简单的列表并创建一个嵌入在地图上的下拉列表。我有一个示例，它使用以下方法创建一组复选框。盒子由以下材料制成：

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">

下拉菜单帐户机会领导

【问题讨论】：

使用click Javascript 函数来控制元素的display 属性。您应该为希望在单击时隐藏/显示的元素添加class。有关下拉菜单的帮助，请参阅 w3schools.com/howto/howto_js_dropdown.asp。
请提供一个Minimal, Complete, Tested and Readable example 来证明您的问题。
相关问题：Google Maps API - show marker from select
Zacharel，您提供的链接非常有帮助。这将创建下拉列表和操作它的代码。我如何将它嵌入到谷歌地图中？将类似于“map.controls[google.maps.ControlPosition.BOTTOM].push(legend);”工作吗？
Mike Williams 的 Google Maps Javascript API v2 教程上有一个页面 Lots of sidebar entries，其中有一个如何使用下拉菜单的示例（尽管它确实依赖于他的其他一些页面的上下文）。 his example ported to v3

标签： javascript html google-maps

【解决方案1】：

这里的例子对我有用，Customized dropdown inside googlemap

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

【讨论】：