带有桌面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

当您单击侧边栏中的一个项目时，它不会自动将地图居中。它是通过点击弹出窗口中的图标来完成的。您可以轻松地自动执行此操作。