帶地圖的桌面JS側邊欄菜單的傳單JS

Question

我對leaflet.js非常陌生，我在網上搜索了所有內容，但找不到示例。 我想要得到的是一個可與tabletop.js一起使用的側邊欄菜單。 我希望在地圖上沒有標記，直到有人單擊側邊欄菜單項。 然后，地圖應將縮放和平移到該標記或將其居中顯示在窗口中。

我的示例頁面位於： https : //codepen.io/justawebbie/pen/LMdyNv

這是我的html：

<div id="mapwrap">
 <div id="toolbar">
    <div class="hamburger">
      <span>Tour&nbsp;Stops</span>
    </div>
    <div id="tourstops">
      <h2>Tour Stops</h2>
      <ul>
      </ul>
    </div>
     </div>
  <div id="leafletmap"></div>
</div>

這是我的傳單和桌面js：

 $('#toolbar .hamburger').on('click', function() {
     $(this).parent().toggleClass('open');
 });

 var a;
 var code_1 = '1rw2Dsm4AbNx6RihhXXxaCIipSH0n09iHYaMoDWLGe38';

 var mymap = L.map('leafletmap', {
     zoomControl: false
 });
 var mapTiles = 
   L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    });

 mapTiles.addTo(mymap);
 mymap.setView([64.856426,-147.834147], 12);
 new L.Control.Zoom({
    position: 'topright'
  }).addTo(mymap);

 var buildingLayers = L.layerGroup().addTo(mymap);
 var markers = L.layerGroup();        
 a = Tabletop({
     key: code_1,
     callback: function(sheet, tabletop){ 
         for (var i in sheet){
            var place = sheet[i];
            var $listItem = $('<li>').html(place.title).appendTo('#toolbar ul');
            $listItem.on('click', function(){
                markers.clearLayers();
                const marker = L.marker([place.lat, place.lon])
                .bindPopup("<div class='row' style='width:300px;'><div class='col'><p><span style='font-size:1.2em;color: #236192;font-weight:bold;'>" + place.title + "</span><br />" + place.address + "</p><p><a href='" + place.weburl + "'>View more</a></p></div></div>")
                markers.addLayer(marker).addTo(mymap);
              })
           }
      },
      simpleSheet: true 
});             

Answer 1

您可以看一下： http : //franceimage.github.io/

您會發現有關其工作原理的一些提示（單擊側欄中的字母I）

它使用邊欄和傳單，但不使用桌面。

數據作為json文件提供（因此所有過濾操作均在客戶端完成）

該應用程序是老式的javascript： http : //franceimage.github.io/map/explore.js

單擊側邊欄中的項目時，它不會自動居中地圖。 通過單擊彈出窗口中的圖標來完成。 您可以輕松地自動執行此操作。