从地图列表创建下拉按钮

<button class="dropdown-btn">选择地图</button>
<div class="dropdown-content">
  <!-- 地图列表项 -->
  <a href="#">地图1</a>
  <a href="#">地图2</a>
  <a href="#">地图3</a>
</div>

/* 按钮样式 */
.dropdown-btn {
  background-color: #f1f1f1;
  color: black;
  padding: 10px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* 下拉菜单容器样式 */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* 下拉菜单项样式 */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* 鼠标悬停时下拉菜单项的样式 */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* 显示下拉菜单的样式 */
.show {
  display: block;
}

// 获取按钮和下拉菜单的元素
var dropdownBtn = document.querySelector('.dropdown-btn');
var dropdownContent = document.querySelector('.dropdown-content');

// 点击按钮时切换下拉菜单的显示/隐藏状态
dropdownBtn.addEventListener('click', function() {
  dropdownContent.classList.toggle('show');
});

// 点击页面其他地方时隐藏下拉菜单
window.addEventListener('click', function(event) {
  if (!event.target.matches('.dropdown-btn')) {
    dropdownContent.classList.remove('show');
  }
});