Leaflet加载Google Sheet数据分组过滤标记异常求助

两个异常分别由以下逻辑错误导致：

• 分组过滤仅显示1个点位：一是Apps Script端分组查询时，逐行读取数据后推入结果数组的是getRange()返回的二维单行数组，导致分组查询结果变成三维嵌套结构；二是前端遍历分组返回数据时，错误使用item[index]取值，forEach循环中index为遍历序号，仅第一条数据能取到有效值，后续数据取值为空，最终只渲染1个点位。
• 标记叠加不清除：前端每次渲染新点位前，没有移除上一次加载的标记图层，旧点位一直保留在地图实例上。

1. 替换Apps Script代码 #

优化数据读取逻辑，一次性拉取全表数据后做过滤，避免循环内频繁调用表格接口拖慢性能，同时修正返回数据结构，保证全量查询和分组查询返回的数组结构完全一致：

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('map');
}

function getAddress(group) {
  var ss= SpreadsheetApp.getActiveSpreadsheet();
  var groupSheet = ss.getSheetByName("Sheet1"); 
  var getLastRow = groupSheet.getLastRow();
  // 一次性读取全量有效数据
  var allData = groupSheet.getRange(2, 1, getLastRow - 1, 5).getValues();
  if (group === 'All'){
    return allData;  
  } else {
    // 过滤匹配分组的行数据，直接返回一维行结构，不做额外嵌套
    return allData.filter(function(row){
      return row[2] === group;
    })
  }
}

2. 替换前端JS逻辑 #

新增独立的标记图层组统一管理点位，每次加载新数据前先清空图层组内的旧标记，同时统一数据取值逻辑，去掉分支内错误的下标写法，补充页面初始化自动加载逻辑：

var map_init = L.map('viewmap',{
    center: [4.042649, 103.624396],
    zoom:8
});
var basemap = L.tileLayer ('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo (map_init);
// 独立图层组统一管理所有点位标记，方便批量清除
var markerLayer = L.layerGroup().addTo(map_init);

function onSelect(){
  var group = document.querySelector('input[name="filGroup"]:checked').value;
  // 加载新数据前清空所有旧标记
  markerLayer.clearLayers();

  google.script.run.withSuccessHandler(function(ar){
    ar.forEach(function(item){
      // 统一取数逻辑，不再区分分支使用不同下标
      var marker = L.marker([item[0], item[1]]).addTo(markerLayer);
      marker.bindPopup('<div class="text"><p>Name: ' + item[3] + '<br>DOB: ' + item[4] + '</p></div>' ); 
    });
  }).getAddress(group);    
}

// 页面初始化时默认加载全部分组数据
onSelect();

内容的提问来源于stack exchange，提问作者LauraEverdeen