请求实现Google Maps标记按CodeClient的滑块筛选功能

嘿，这个需求实现起来挺清晰的，我给你拆解成几个步骤，照着来就能搞定按CodeClient筛选Google Maps标记的功能：

1. 先把标记和CodeClient关联存储起来 #

当你初始化每个门店的地图标记时，别只创建标记就丢了，得把标记对象和对应的CodeClient绑定在一起，存到一个数组里，这样后续筛选的时候才能快速找到对应标记。

// 在合适的作用域（比如全局或者地图初始化的函数里）定义数组
let storeMarkers = [];

// 遍历你的门店列表创建标记
yourStoreList.forEach(store => {
  // 创建标记
  const marker = new google.maps.Marker({
    position: { lat: store.latitude, lng: store.longitude },
    map: yourMapInstance, // 这里替换成你的地图实例变量
    // 给标记加个自定义属性存CodeClient，方便后续获取
    codeClient: store.CodeClient
  });
  
  // 把标记推到数组里保存
  storeMarkers.push(marker);
});

2. 处理用户的筛选交互 #

给你的输入框和筛选按钮绑定事件，当用户输入CodeClient并点击按钮后，遍历所有标记，只显示匹配的，隐藏不匹配的。

// 获取页面上的输入框和按钮元素（记得替换成你实际的ID）
const codeInput = document.getElementById('code-client-input');
const filterButton = document.getElementById('filter-markers-btn');

// 绑定按钮点击事件
filterButton.addEventListener('click', () => {
  const targetCode = codeInput.value.trim();
  
  // 如果输入为空，直接显示所有标记
  if (!targetCode) {
    storeMarkers.forEach(marker => {
      marker.setMap(yourMapInstance);
    });
    return;
  }
  
  // 遍历标记，匹配CodeClient的显示，否则隐藏
  storeMarkers.forEach(marker => {
    if (marker.codeClient === targetCode) {
      marker.setMap(yourMapInstance); // 显示标记
    } else {
      marker.setMap(null); // 隐藏标记
    }
  });
});

3. 可选的优化小技巧 #

为了提升用户体验，你可以加几个小功能：

• 支持回车触发筛选：

  codeInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
      filterButton.click();
    }
  });
  

• 如果你的门店数据特别大（比如上万条），可以先在数据源层面过滤，再更新标记，减少遍历开销：

  // 先从原始门店列表里过滤出匹配的CodeClient集合
  const matchedCodes = yourStoreList
    .filter(store => store.CodeClient === targetCode)
    .map(store => store.CodeClient);
  
  // 再更新标记状态
  storeMarkers.forEach(marker => {
    marker.setMap(matchedCodes.includes(marker.codeClient) ? yourMapInstance : null);
  });
  

• 可以加个「清空筛选」按钮，一键恢复显示所有标记。

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