Question

我对Mapbox还是很陌生，并且对javascript有非常基本的了解，因此，如果您可以提供帮助，将不胜感激。

我正在尝试将过滤器加载到我的网络地图上，该过滤器基于我的数据集中通过Mapbox Studio加载到我的地图上的字段（属性，列）。我遵循了本教程： https://www.mapbox.com/mapbox.js/example/v1.0.0/markers-with-multiple-filters/ 以及此处提供的一些解决方案，但我无法使用现在在地图上可见的按钮将数据对齐。

这是我的HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8' />
  <title></title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.css' rel='stylesheet' />
  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%}

    .mapboxgl-popup-content {
    max-width: 300px;
    }
</style>
</head>
<body>
<style>
     .menu-ui {
  background:#fff;
  position:absolute;
  top:10px;right:10px;
  z-index:1;
  border-radius:3px;
  width:120px;
  border:1px solid rgba(0,0,0,0.4);
  }
  .menu-ui a {
    font-size:13px;
    color:#404040;
    display:block;
    margin:0;padding:0;
    padding:10px;
    text-decoration:none;
    border-bottom:1px solid rgba(0,0,0,0.25);
    text-align:center;
    }
    .menu-ui a:first-child {
      border-radius:3px 3px 0 0;
      }
    .menu-ui a:last-child {
      border:none;
      border-radius:0 0 3px 3px;
      }
    .menu-ui a:hover {
      background:#f8f8f8;
      color:#404040;
      }
    .menu-ui a.active,
    .menu-ui a.active:hover {
      background:#3887BE;
      color:#FFF;
      }

</style>
<script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
<nav class='menu-ui'>
    <a href='#' class='active' data-filter='under300'>Under AED 300</a>
    <a href='#' data-filter='between3and4'>Between AED 300 and AED 400</a>
    <a href='#' data-filter='plus400'>AED 400 plus</a>
  </nav>
<div id='map'></div>
<script>

mapboxgl.accessToken = //insert here;
const map = new mapboxgl.Map({
  container: 'map',
  style: //insert here,
  center: [54.450013, 24.476566],
  zoom: 10.00
});

map.addControl(new mapboxgl.NavigationControl());

$('.menu-ui a').on('click', function () {
    var filter = $(this).data('filter');
    $(this).addClass('active').siblings().removeClass('active');
    features.setFilter(function (f) {
        return (filter === 'under 300') ? true : f.properties[filter] === TRUE;
    });
    return false;
});

map.on('load', function() {
    var popup = new mapboxgl.Popup({
        offset: {bottom: [0,0], top: [0,0]},
        closeButton: false,
        closeOnClick: false,
    });

    function showPopup (e) {
        map.getCanvas().style.cursor = 'pointer';

    popup.setLngLat(e.features[0].geometry.coordinates)
    .setHTML(checkEmpty('<center><a href="'+e.features[0].properties.image+'"><img src="'+e.features[0].properties.direct+'" width = "100px"/></a>'+
    '</center><h3>'+e.features[0].properties.restaurant_title+ 
    '</h3><h4>'+e.features[0].properties.macro_location+'</h4>'))
    .addTo(map);
    }

    function hidePopup() {
        map.getCanvas().style.cursor = '';
        popup.remove();
    }

    function checkEmpty(info) {
        return (info) ? info: "No data";
    }

map.on('mouseenter', 'bestbitesad-brunches', showPopup);
map.on('mouseleave', 'bestbitesad-brunches', hidePopup);
});

map.on('click', function(e) {
  var features = map.queryRenderedFeatures(e.point, {
      layers: ['bestbitesad-brunches']
    });

  if (!features.length) {
    return;
  }

  var feature = features[0];

  var popup1 = new mapboxgl.Popup({ 
      offset: [0,0,0,0],
      closeOnClick: true,
      anchor: 'middle'})
    .setLngLat(feature.geometry.coordinates)
    .setHTML( '<center><a href="'+feature.properties.image+'"><img src="'+feature.properties.direct+'" width = "100px"/></a>'+
    '</center><h3>' + feature.properties.restaurant_title + 
    '</h3><h4>' +feature.properties.macro_location+ 
    '</h4><h5>' + feature.properties.contact+
    '</h5><h5>' + feature.properties.times +
    '</h5><p>' + feature.properties.description + 
    '</p><hr><p>' + feature.properties.pricing + '</hr></p>')
    .setLngLat(feature.geometry.coordinates)
    .addTo(map);
});
</script>



</body>
</html>

预先感谢您的帮助！

尝试向我的Mapbox样式添加过滤器

0 个答案: