传单控件没有响应点击答案

【问题标题】：Leaflet controls not responding to click传单控件没有响应点击
【发布时间】：2021-09-16 14:03:31
【问题描述】：

不确定我是如何做到这一点的，但我的传单缩放控件不可点击？它们确实会显示在屏幕上，但鼠标悬停在它们上方时不会发生变化。

我需要为控件创建另一个层还是我的代码中缺少其他内容？

更新：地图也不会滚动或放大 - 它看起来是静态的

这是我与地图相关的脚本：

var mymap = L.map('mapid');


var Jawg_Streets = L.tileLayer('https://{s}.tile.jawg.io/jawg-streets/{z}/{x}/{y}{r}.png?access-token={accessToken}', {
    attribution: '<a href="http://jawg.io" title="Tiles Courtesy of Jawg Maps" target="_blank">&copy; <b>Jawg</b>Maps</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    minZoom: 0,
    maxZoom: 22,
    subdomains: 'abcd',
    accessToken: foo
}).addTo(mymap);

mymap.zoomControl.setPosition('bottomleft');
mymap.setView([51.505, -0.09], 13);

也不确定它是否与我的 html 有关：

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">
        
        <title>Gazetteer</title>


        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <link href="favicon.ico" rel="icon">

        <!--Stylesheets-->

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
        <link href="css/styles.css" type="text/css" rel="stylesheet"> 
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
           integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
           crossorigin=""/>
        <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/MarkerCluster.css' rel='stylesheet' />
        <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/MarkerCluster.Default.css' rel='stylesheet' />
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css" integrity="sha384-wESLQ85D6gbsF459vf1CiZ2+rr+CsxRY0RpiF1tLlQpDnAgg6rwdsUF1+Ics2bni" crossorigin="anonymous">  
        <script src="https://use.fontawesome.com/acad2da5ff.js"></script>
    </head>

    <body>
       <div id="mapid" class="container-fluid"> 
        
      </div>
     
    etc

    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
       crossorigin=""></script>
       <script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.js"></script>
      <script src="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/leaflet.markercluster.js"></script>
      <script type="application/javascript" src="js/jquery-2.2.3.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
      <script type="application/javascript" src="js/script.js"></script>


    </body> 

</html>

或 CSS

#mapid {
    height: 100vh;
   z-index: -1;
}

谢谢

【问题讨论】：

您的代码看起来不错，对我有用。也许你禁用了 CSS 上的点击事件？
刚刚意识到整个地图对拖动或缩放没有反应——它完全是静止的。我有引导程序和传单，然后与地图相关的唯一其他 CSS 是 #mapid { height: 100vh; z-index: -1; }

标签： javascript html css leaflet controls

【解决方案1】：

从 css 样式中删除 z-index: -1，它应该可以工作。

WORKING DEMO

MapPanes - Leaflet Docs

【讨论】：

这么简单却给我带来了这么多问题——谢谢！