向传单地图添加自定义按钮

Question

我遵循了一个关于如何将自定义按钮添加到传单地图的示例。

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

这样做的正确方法是什么？

Answer 1

Leaflet 将一些<div>'s添加到地图容器中，并使用一些“高”z-index值来保存地图和控件。

因此，如果您想将自己的按钮叠加在地图和/或控件的顶部，您应该将它们放置在 Leaflet 控件占位符中，或者至少指定一个z-index高于 Leaflet 的值。

通常，地图位于设置为的.leaflet-pane容器内。控件具有或类，设置为。z-index400.leaflet-top.leaflet-bottomz-index1000

通过将z-index按钮容器的设置为 >= 1001，现在您的按钮出现在地图和控件上方。

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>