ズームコントロールを追加しても表示されないのはなぜですか？

Question

マップ機能を制御するためにマップボックスとリーフレットを使用していますが、ズームイン/アウトコントロールを表示したいが、追加しても機能しませんでした。何が問題なのか。私はいくつかのCSSを変更したが、私のために働かなかった。私はどこに問題があるのか​​分からない。誰かがこれを行う前に私を助けることができますか？

HTML

<div class="main-wrapper"> 
     <div class="main"> 
      <div class="main-inner"> 

       <div class="content"> 
        <div class="row map-filter-nav"> 
         <div class="filter filter-gray push-bottom"> 

         </div><!-- /.filter --> 
        </div> 
        <div class="container-fluid fullwidth-wrapper map-and-property-holder"> 
         <div class="row"> 
          <div class="col-lg-4 col-md-6 mapProperty-holder"> 

          </div><!-- /.col-* --> 

          <div class="col-lg-8 col-md-6 map-holder"> 
           <div id="map-leaflet" class="full"></div> 
          </div> 


         </div><!-- /.row --> 
        </div><!-- /.container --> 
       </div><!-- /.content --> 
      </div><!-- /.main-inner --> 
     </div><!-- /.main --> 
    </div><!-- /.main-wrapper --> 

JS

if ($('#map-leaflet').length) { 
     var map = L.map('map-leaflet', { 
      zoom: 5, 
      maxZoom: 20, 
      center: [36.123452,-119.3387975], 
      zoomControl: false 
     }); 

     var access_token = 'pk.eyJ1IjoiYXZlbmdlcnMyOCIsImEiOiJjajlhNXMwYmgxOW1iMndxcWsyM3N3ZnBkIn0.zGOootjXB64isTkthoa2xQ'; 
     var marker_cluster = L.markerClusterGroup();   

     //map.scrollWheelZoom.disable(); 


     L.control.zoom({ 
      position:'topright' 
     }).addTo(map); 


     L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + access_token, {    
      id: 'mapbox.streets', 
      attribution: '<a href="http://www.mapbox.com/about/maps/" target="_blank">Terms &amp; Feedback</a>' 
     }).addTo(map); 




     $.each(db_markers, function(index, value) { 
      var icon = L.divIcon({ 
       html: value.icon, 
       iconSize:  [36, 36], 
       iconAnchor: [36, 36], 
       popupAnchor: [-20, -42] 
      }); 

      var marker = L.marker(value.center, { 
       icon: icon 
      }).addTo(map);  

      marker.bindPopup(
       '<div class="listing-window-image-wrapper">' + 
        '<a href="properties-detail-standard.html">' + 
         '<div class="listing-window-image" style="background-image: url(' + value.image + ');"></div>' + 
         '<div class="listing-window-content">' + 
          '<div class="info">' + 
           '<h2>' + value.title + '</h2>' + 
           '<h3>' + value.price + '</h3>' + 
          '</div>' + 
         '</div>' + 
        '</a>' + 
       '</div>' 
      ); 

      marker_cluster.addLayer(marker); 
     }); 

     map.addLayer(marker_cluster); 


    } 

leaflet.css

/* zoom control */ 

.leaflet-control-zoom-in, 
.leaflet-control-zoom-out { 

    font: bold 18px 'Lucida Console', Monaco, monospace; 
    text-indent: 1px; 
    } 
.leaflet-control-zoom-out { 
    font-size: 20px; 
    } 

.leaflet-touch .leaflet-control-zoom-in { 
    font-size: 22px; 
    } 
.leaflet-touch .leaflet-control-zoom-out { 
    font-size: 24px; 
    } 

Answer 1

minimal exampleリーフレット1.2.0で問題なく動作します：ズームコントロールが正しくコードで要求されるように、右上に表示されます

var map = L.map('map-leaflet', { 
 
    zoom: 5, 
 
    maxZoom: 20, 
 
    center: [36.123452, -119.3387975], 
 
    zoomControl: false 
 
}); 
 

 
L.control.zoom({ 
 
    position: 'topright' 
 
}).addTo(map); 
 

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

/* zoom control */ 
 

 
.leaflet-control-zoom-in, 
 
.leaflet-control-zoom-out { 
 
    font: bold 18px 'Lucida Console', Monaco, monospace; 
 
    text-indent: 1px; 
 
} 
 

 
.leaflet-control-zoom-out { 
 
    font-size: 20px; 
 
} 
 

 
.leaflet-touch .leaflet-control-zoom-in { 
 
    font-size: 22px; 
 
} 
 

 
.leaflet-touch .leaflet-control-zoom-out { 
 
    font-size: 24px; 
 
} 
 

 
#map-leaflet { 
 
    height: 200px; 
 
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin="" /> 
 
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script> 
 

 
<div id="map-leaflet"></div>

。