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

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

带地图的桌面JS侧边栏菜单的传单JS

1 个答案: