使用2张幻灯片菜单创建地图以查找所选实体

Question

我不知道这里有人可以轻松地帮助我，并确保我不希望您浪费时间。我确实是编程方面的新手（仅在90年代末学习过HTLM ^^），但我一直很感兴趣。不幸的是，我的工作，孩子们，“地铁手”没有太多时间我们在法国说。

但是对于covid病毒，情况发生了变化。我需要为自己的工作开发一种制图工具，以帮助在围产期可以打开的工匠被接近用户找到。我们有一些时间（直到下周一）。是时候让我跳入代码了……如果可以的话！

因此，我想做的事情很简单：我有一份要定位在地图上的工匠清单，已地理定位。我可以使用我在互联网上掌握的许多工具来做到这一点。没那么难。但是，在更复杂的地方，我想有两个幻灯片菜单来帮助用户准确地进行搜索：一个用于选择区域，另一个用于选择工匠类别（食品，建筑工人，邻近服务等）。

这里是图像的外观：clic here

我在互联网上找到了Leaflet，我试图在本教程中了解如何做到这一点。但是我是新手...而且是法国人！因此，这对我来说很难找到好的方法。

所以，即使我是新手，我也可以做我的项目吗？

如果可能的话，我需要遵循哪个教程来学习呢？

非常感谢。

朱利安

Answer 1

我为您创建了一个示例。https://jsfiddle.net/falkedesign/a1hs0qm3/

非常有用的是传单本身的教程。 https://leafletjs.com/examples.html

数据：

var data = [
    {
    location: 'paris',
    name: 'Test 1',
    coords: [48.848220, 2.288350],
    type: 'restaurant'
  },
...

过滤标记的功能：

//Create a group that contains the markers
var fg = L.featureGroup().addTo(map);

function filterMarkers(){
    //delete the markers from the group
    fg.clearLayers();
  //get selected values
    var selectedplace = document.getElementById('select-place').value; 
    var selectedtype = document.getElementById('select-type').value; 

    var filtered = data.filter(function(entry){return entry.location == selectedplace && entry.type == selectedtype});

  //loop through each entry of the filtered array
  filtered.forEach(function(entry){
    //create marker with a popup
    var marker = L.marker(entry.coords).bindPopup(entry.location+" "+entry.name);
    //add to the group the marker
    fg.addLayer(marker);
  });
  //Set the View of the map that all markers are visible, without zooming in
  map.fitBounds(fg.getBounds(),{maxZoom: map.getZoom()});
}