如何在 mapbox 地图上获取活动标记的数量

Question

我使用 MapBoxGL 创建了可过滤位置的地图。我想包括最终用户可见的标记的活动计数，但不知道从哪里开始实现这一目标。是否可以使用 JavaScript 调用可见的活动标记？

我在下面附上了我的 HTML 和 Javascript 代码。任何帮助都是提前appreciated.Thanks。

function ApplyFilters() {


   var type = document.querySelector("input[type=radio][name=type]:checked").value;

   if (type === 'both') {
      var filtertype = ["in", "type", 'hall', 'apartment'];
   } else {
      var filtertype = ["in", "type", type];
   }

   var style = document.querySelector("input[type=radio][name=style]:checked").value;

   if (style === 'all') {
      var filterstyle = ["in", "style", 'low rise', 'high rise', 'apartment', ''];
   } else {
      var filterstyle = ["in", "style", style];
   }

   var gender = document.querySelector("input[type=radio][name=gender]:checked").value;

   if (gender === 'all') {
      var filtergender = ["in", "gender", 'womens', 'mens', 'co-ed', ''];
   } else {
      var filtergender = ["in", "gender", gender];
   }


   var dining = document.querySelector("input[type=radio][name=dining]:checked").value;

   if (dining === 'both') {
      var filterdining = ["in", "dining-center", 'yes', 'no'];
   } else {
      var filterdining = ["in", "dining-center", dining];
   }


   var AC = document.querySelector("input[type=radio][name=AC]:checked").value;

   if (AC === 'both') {
      var filterAC = ["in", "air", 'yes', 'no'];
   } else {
      var filterAC = ["in", "air", AC];
   }


   var upperdivision = document.querySelector("input[type=radio][name=upperdivision]:checked").value;

   if (upperdivision === 'both') {
      var filterupperdivision = ["in", "upper-division", 'yes', 'no'];
   } else {
      var filterupperdivision = ["in", "upper-division", upperdivision];
   }


   var filters = [
      "all",
      filtertype,
      filterstyle,
      filtergender,
      filterdining,
      filterAC,
      filterupperdivision,


   ]
   map.setFilter('Locations', filters)
}

<div class="radio-toolbar">
   <p>Type</p>
   <input type="radio" id="Apartment_Type" name="type" value="apartment" onclick="ApplyFilters()">
   <label for="Apartment_Type">Apartment</label>
   <input type="radio" id="Residence_Hall_Type" name="type" value="hall" onclick="ApplyFilters()">
   <label for="Residence_Hall_Type">Residence Hall</label>
   <input type="radio" id="Both_Type" name="type" value="both" onclick="ApplyFilters()" checked>
   <label for="Both_Type">Both</label>
   <br><br>
   <hr>
</div>
<div class="radio-toolbar">
   <p>Style <br> <span style="font-size: 10px;">(Residence Hall Only)</span></p>
   <input type="radio" id="Low_Rise_Style" name="style" value="low rise" onclick="ApplyFilters()">
   <label for="Low_Rise_Style">Traditional Style (Low Rise)</label>
   <br><br>
   <input type="radio" id="High_Rise_Style" name="style" value="high rise" onclick="ApplyFilters()">
   <label for="High_Rise_Style">Suite Style (High Rise)</label>
   <br><br>
   <input type="radio" id="Apartment_Style" name="style" value="apartment" onclick="ApplyFilters()">
   <label for="Apartment_Style">Apartment Style</label>
   <input type="radio" id="All_Style" name="style" value="all" onclick="ApplyFilters()" checked>
   <label for="All_Style">All</label>
   <br><br>
   <hr>
</div>
<div class="radio-toolbar">
   <p>Gender <br> <span style="font-size: 10px;">(Residence Hall Only)</span></p>
   <input type="radio" id="Womens_Gender" name="gender" value="womens" onclick="ApplyFilters()">
   <label for="Womens_Gender">Womens</label>
   <input type="radio" id="Mens_Gender" name="gender" value="mens" onclick="ApplyFilters()">
   <label for="Mens_Gender">Mens</label>
   <input type="radio" id="Coed_Gender" name="gender" value="co-ed" onclick="ApplyFilters()">
   <label for="Coed_Gender">Co-Ed</label>
   <input type="radio" id="All_Gender" name="gender" value="all" onclick="ApplyFilters()" checked>
   <label for="All_Gender">All</label>
   <br><br>
   <hr>
</div>
<div class="radio-toolbar">
   <p>Connected to Dining Center <br> <span style="font-size: 10px;">(Residence Hall Only)</span></p>
   <input type="radio" id="Yes_Dining" name="dining" value="yes" onclick="ApplyFilters()">
   <label for="Yes_Dining">Yes</label>
   <input type="radio" id="No_Dining" name="dining" value="no" onclick="ApplyFilters()">
   <label for="No_Dining">No</label>
   <input type="radio" id="Both_Dining" name="dining" value="both" onclick="ApplyFilters()" checked>
   <label for="Both_Dining">Both</label>
   <br><br>
   <hr>
</div>
<div class="radio-toolbar">
   <p>Air Conditioning</p>
   <input type="radio" id="Yes_AC" name="AC" value="yes" onclick="ApplyFilters()">
   <label for="Yes_AC">Yes</label>
   <input type="radio" id="No_AC" name="AC" value="no" onclick="ApplyFilters()">
   <label for="No_AC">No</label>
   <input type="radio" id="Both_AC" name="AC" value="both" onclick="ApplyFilters()" checked>
   <label for="Both_AC">Both</label>
   <br><br>
   <hr>
</div>
<div class="radio-toolbar">
   <p>Upper-Division <br> <span style="font-size: 10px;">(Non-First Year Students Only)</span></p>
   <input type="radio" id="Yes_Upper_Division" name="upperdivision" value="yes" onclick="ApplyFilters()">
   <label for="Yes_Upper_Division">Yes</label>
   <input type="radio" id="No_Upper_Division" name="upperdivision" value="no" onclick="ApplyFilters()">
   <label for="No_Upper_Division">No</label>
   <input type="radio" id="Both_Upper_Division" name="upperdivision" value="both" onclick="ApplyFilters()" checked>
   <label for="Both_Upper_Division">Both</label>
   <br><br>
</div>
<hr>

通过将此添加到 Javascript 函数的末尾，我能够获得当前计数：

var filteredcount = map.queryRenderedFeatures({layers: ['Locations']}).length;

document.getElementById('outputcount').innerHTML = filteredcount + " Results";

该数字最初似乎不正确。然而，它似乎只是提前打电话。如果我两次调用该函数，它似乎是准确的。也许，我遗漏了什么？

Answer 1

您实际添加标记的代码部分丢失了。但是，如果您按此处所述添加标记，则可以在 html 文档中找到它们：

要获得计数，您必须遍历文档并计算 class“mapboxgl-marker”的 div。

Answer 2

这对我有用：

map.on('render', function() {
    var filteredcount = map.queryRenderedFeatures({ layers: ['Locations'] }).length;
    if(filteredcount == 0){
      document.getElementById('outputcount').innerHTML = "<span style='color:red;'>0 Results <br> Please Adjust Filters</span>";
    } else{
      document.getElementById('outputcount').innerHTML = filteredcount + " Results";
    }


    });

如何在 mapbox 地图上获取活动标记的数量

How to get count of active markers on mapbox map

html

javascript

mapbox

mapbox-gl

mapbox-gl-js