Question

我已按照an example了解如何将自定义按钮添加到传单地图。

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

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

Answer 1

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

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

通常，地图位于.leaflet-pane容器中，z-index设置为400。控件包含.leaflet-top或.leaflet-bottom类，z-index设置为1000。

通过将按钮容器的z-index设置为＆gt; = 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>

向Leaflet Map添加自定义按钮

1 个答案: