在传单地图顶部显示选择选项 [英] Make Select Option Display on top of Leaflet Map

问题描述

我正在尝试在传单地图顶部显示一个选择标签(使用引导程序).

我已经尝试修改 css 中的 z-index，但仍然看不到 select 标签.

我错过了什么?

我的 HTML 如下:

<表格><div class="form-group form-row align-items-center"><select class="form-control";id=国家下拉列表"名称=国家"><选项值=-"id="select-country">选择一个国家...</option></选择>
</表单>

解决方案

使 form 成为地图的兄弟，并根据需要使用 css 对其进行定位.如果您希望地图全屏显示，并在其上布置表单，请使用带有 position:relative 的公共父级来实现.您还可以在 css 中使用 pointer-events 以允许与地图进行交互，但仍使您的表单元素可用:

var mymap = L.map('map').setView([51.505, -0.09], 13);var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {最大缩放:19，归属:'&copy;<a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>贡献者}).addTo(mymap);

.wrapper, #map, .form {高度:300px；宽度:100%；填充:0；保证金:0}.包装{位置:相对}#map, .form {位置:绝对；顶部:0；左:0}.形式 {z-index:100000；填充:10px 60px；指针事件:无；}.form >* {指针事件:自动；}

<link href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" rel="样式表"/><script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script><div class="wrapper"><div id="地图"></div><表单类=表单"><select class="form-control" id="country-dropdown" name="country"><option value="-" id="select-country">选择一个国家...</选项></选择><输入类型=文本"><输入类型=文本"><输入类型=文本"><select class="form-control" id="country-dropdown" name="country"><option value="-" id="select-country">选择一个国家...</选项></选择><输入类型=文本"><输入类型=文本"><input type="text"><select class="form-control" id="country-dropdown" name="country"><option value="-" id="select-country">选择一个国家...</选项></选择><输入类型=文本"><输入类型=文本"><输入类型=文本"></表单>

I'm trying to display a select tag on top of a leaflet map (using bootstrap).

I've tried amending the z-index in css but the select tag is still not visible.

What am I missing?

My HTML below:

<div id="mapid" class="container-fluid">
      <form>
        <div class="form-group form-row align-items-center">
         <select class="form-control" id="country-dropdown" name="country">
            <option value="-" id="select-country">Pick a Country...</option>
         </select>
        </div> 
     </form>
 </div>

解决方案

Make the form a sibling of the map, and use css to position it as you want. If you want the map to be full screen, and the form to be laid out over it, use a common parent with position: relative to do that. You can also use pointer-events in the css to allow interactivity with the map but still make your form elements usable:

var mymap = L.map('map').setView([51.505, -0.09], 13);

var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);

.wrapper, #map, .form {
  height: 300px;
  width: 100%;
  padding: 0;
  margin: 0
}

.wrapper {
  position: relative
}

#map, .form {
  position: absolute;
  top: 0;
  left: 0
}

.form {
  z-index: 100000;
  padding: 10px 60px;
  pointer-events: none;
}

.form > * {
  pointer-events: auto;
}

<link href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" rel="stylesheet"/>

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>


   
   <div class="wrapper">
     <div id="map"></div>
     <form class="form">
        <select class="form-control" id="country-dropdown" name="country">
          <option value="-" id="select-country">
            Pick a Country...
          </option>
         </select>
       <input type="text">
       <input type="text"> <input type="text">
<select class="form-control" id="country-dropdown" name="country">
          <option value="-" id="select-country">
            Pick a Country...
          </option>
         </select>
       <input type="text">
       <input type="text"> <input type="text"><select class="form-control" id="country-dropdown" name="country">
          <option value="-" id="select-country">
            Pick a Country...
          </option>
         </select>
       <input type="text">
       <input type="text"> <input type="text">
     </form>
   </div>

这篇关于在传单地图顶部显示选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！