javascript - 将自定义按钮添加到传单 map

Question

我关注了an example关于如何将自定义按钮添加到传单 map 。

但是，我希望按钮与 map 重叠。使用该示例中的确切代码，我尝试将它们移动到 <div id="map"> 中但它们隐藏在它后面。

正确的做法是什么？

Answer 1

Leaflet 增加了一些 <div>进入 map 容器，带有一些“高”z-index保存 map 和控件的值。

因此，如果您想在 map 和/或控件之上覆盖您自己的按钮，您应该将它们放在 Leaflet 控件占位符中，或者至少指定一个 z-index。高于 Leaflet 的值。

通常， map 位于 .leaflet-pane 内容器z-index设置为 400 .控件有 .leaflet-top或 .leaflet-bottom类，z-index设置为 1000 .

通过设置 z-index您的按钮容器设置为 >= 1001，现在您的按钮显示在 map 和控件上方。

var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
  osmAttrib = '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' + ' contribuitori',
  cartoUrl = 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_nolabels/{z}/{x}/{y}.png',
  cartoAttrib = '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/attribution/">CARTO</a>';

var osmMap = L.tileLayer(osmUrl, {
    minZoom: 12,
    maxZoom: 18,
    attribution: osmAttrib
  }),
  cartoMap = L.tileLayer(cartoUrl, {
    minZoom: 12,
    maxZoom: 18,
    attribution: cartoAttrib
  });

var map = L.map('map', {
    layers: [cartoMap]
  })
  .setView([44.434, 26.107], 16);

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://unpkg.com/leaflet-easybutton@2.0.0/src/easy-button.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans+Condensed:300,400,400i,700" rel="stylesheet">

<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/leaflet-easybutton@2.0.0/src/easy-button.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="map" style="height: 200px">
  <div class="btn-group" style="z-index: 1001"> <!-- Use 401 to be between map and controls -->
    <button type="buttons" id="allbus" class="btn btn-success">All</button>
    <button type="buttons" id="others" class="btn btn-primary">Others</button>
    <button type="buttons" id="cafes" class="btn btn-danger">Cafes</button>
  </div>
</div>