Question

我有一个WordPress网站，其中有一堆自定义帖子类型条目，这些条目在自定义字段中附加了纬度和经度。这些条目也被分类（公园，政策，公共道路等）。

我有一个现有的存档页面，其中的条目显示为HTML，但是我也希望这些元素也显示在地图上。

所以...由于数据来自WordPress，所以我没有简单的geoJSON数据集，而是通过仅循环遍历现有HTML并提取数据属性来向地图添加标记并在地图上绘制纬度/经度值作为标记。

HTML

<div class="marker clr" 
  id="12345" 
  data-type="policy" 
  data-lat="42.32933463961479" 
  data-lng="-71.03501082368166">
</div>

获取属性

$('.markers .marker').each(function() {
  var type = $(this).data('type');
  var lat = $(this).data('lat');
  var lng = $(this).data('lng');
  var coords = [lng,lat];

  var el = document.createElement('div');
  el.setAttribute('data-type', type);
  el.setAttribute('data-lat', lat);
  el.setAttribute('data-lng', lng);

  new mapboxgl.Marker(el)
    .setLngLat(coords)
    .addTo(map);
}

因此，所有工作都很好。我现在想做的是，在地图上方有与按钮的“类型”相对应的外部按钮。如果我单击“策略”按钮，它将实时更新地图以仅显示那些图钉。单击“全部”将返回显示所有图钉，等等。我浏览了Mapbox文档以过滤想法，但似乎只讨论“符号”。看来我应该可以通过jQuery或Javascript定位现有标记并更新地图？

Mapbox的新手，对正确方向的任何建议或推动都会对您有所帮助。同样，您做错了方向也是可以接受的！

更新

对于任何偶然发现此问题的人：我的解决方案是将标记循环转换为接受参数的函数。页面首次加载时，它将以 all 作为输入来调用该函数。然后在过滤器按钮上单击，它将清除地图并以适当的类别作为输入来调用该函数。然后，它仅创建与过滤器输入匹配的点。清除/添加会随我拥有的点数立即发生，并且动画会自动发生。我敢肯定有一个更优雅的解决方案，但这似乎可以满足我的需求。

function addMarkers(filter) {
    var bounds = new mapboxgl.LngLatBounds();

    $('.mapboxgl-marker').remove();

    // Loop through the HTML marker divs and add markers to the map.
    $('.markers .marker').each(function() {

        $this = $(this);
        var owner = $this.data('owner');
        var type = $this.data('type');
        var lat = $this.data('lat');
        var lng = $this.data('lng');
        var coords = [lng,lat];

        if ( (type.includes(filter)) || (filter === 'all') ) {

            var el = document.createElement('div');
            el.id = $this.attr('id') + '-trigger';
            el.setAttribute('data-owner', owner);
            el.setAttribute('data-type', type);
            el.setAttribute('data-lat', lat);
            el.setAttribute('data-lng', lng);

            new mapboxgl.Marker(el, {
                    offset: [0,-25]
                })
                .setLngLat(coords)
                .addTo(map);

            bounds.extend(coords);  
        }
    });

    map.fitBounds( bounds, { padding: {top:100, bottom:100, left:100, right:100} } );
}

WordPress和Mapbox GL。通过外部按钮过滤标记/条目

0 个答案: