React JS 实现 Google Maps 中 Polyline 折线筛选功能的问题咨询

基础实现逻辑 #

1. 定义带筛选属性的折线数据集 #

不要单独创建Polyline实例，提前给每条折线绑定你需要的可筛选字段，比如路线类型、所属批次、创建人等自定义属性：

// 折线数据结构示例，可根据业务需求扩展字段
const polylineList = [
  {
    id: 'line_001',
    routeType: 'commute', // 筛选字段：通勤路线
    path: [{lat: 31.2304, lng: 121.4737}, {lat: 31.235, lng: 121.48}],
    strokeColor: '#2196F3',
    strokeWeight: 3
  },
  {
    id: 'line_002',
    routeType: 'freight', // 筛选字段：货运路线
    path: [{lat: 31.22, lng: 121.46}, {lat: 31.24, lng: 121.49}],
    strokeColor: '#F44336',
    strokeWeight: 4
  }
]

2. 批量创建折线并统一托管实例 #

用Map结构存储所有Polyline实例，同时把元数据绑定到实例上，后续筛选不需要再查原始数据集：

// 全局托管所有折线实例，key为折线id，value为Polyline实例
const polylineMap = new Map();

// 初始化折线到地图
function initAllPolylines(map, data) {
  data.forEach(item => {
    const polyline = new google.maps.Polyline({
      path: item.path,
      strokeColor: item.strokeColor,
      strokeWeight: item.strokeWeight,
      map: map,
      visible: true
    });
    // 绑定元数据到实例
    polyline.meta = item;
    polylineMap.set(item.id, polyline);
  })
}

// 调用示例，传入你的地图实例和数据集即可
initAllPolylines(yourMapInstance, polylineList);

3. 实现筛选逻辑 #

核心是通过修改Polyline的setVisible方法控制显隐，不需要反复销毁重建实例：

// 按路线类型筛选
function filterByRouteType(type) {
  polylineMap.forEach(line => {
    // 传all则显示全部折线
    if(type === 'all') {
      line.setVisible(true);
      return;
    }
    // 匹配筛选条件
    const shouldShow = line.meta.routeType === type;
    line.setVisible(shouldShow);
  })
}

// 调用示例：只显示货运路线
filterByRouteType('freight');
// 调用示例：显示所有路线
filterByRouteType('all');

扩展优化点 #

• 多选筛选可以把入参改成数组，判断逻辑调整为typeArr.includes(line.meta.routeType)即可
• 折线数量超过200条时可以给筛选方法加100ms防抖，避免频繁操作地图导致卡顿
• 需要删除折线时，先调用line.setMap(null)销毁实例，再从polylineMap中删除对应项即可

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