Google Maps标记多选筛选后全部消失问题排查求助

• 核心错误是Array.includes()方法的使用逻辑颠倒：你当前写的marker.status.includes(arrayOfSelectedIDs)是尝试用单个状态字符串去匹配整个选中值数组。选择单个选项时，数组转字符串后刚好和单个状态值一致，所以判断能生效；当你选择多个选项时，数组转字符串后是类似Active,Inactive的拼接值，单个标记的状态不可能包含这个字符串，所以判断永远返回false，所有标记都会被隐藏。
• 补充语法问题：你贴出的JS代码末尾缺少两个闭合大括号，分别对应for循环和filterMarkers函数，运行时会报语法错误。

JS代码 #

filterMarkers = function(fieldID){        
    var selective = document.getElementById(fieldID).options;        
    var arrayOfSelectedIDs = [];        
    for (let i = 0; i < selective.length; i++) {        
        if (selective[i].selected){            
            arrayOfSelectedIDs.push(selective[i].value)          
        }        
    }        
    console.log(arrayOfSelectedIDs);
    // 空选时展示所有标记的可选逻辑
    const showAll = arrayOfSelectedIDs.length === 0;
    for (let i = 0; i < gmarkers.length; i++) {          
        marker = gmarkers[i];          
        marker.setMap(map)
        if (showAll || arrayOfSelectedIDs.includes(marker.status)) {            
            marker.setVisible(true);          
        } else {            
            marker.setVisible(false);          
        }
    }
}

HTML代码 #

<select class="status-multiple" required name="status[]" multiple="multiple" id="status" onchange="filterMarkers(this.id);" style="width: 7%;">  
  <option value=""></option>  
  <option value="Active">Aktiv</option>  
  <option value="Inactive">Inaktiv</option>  
  <option value="Prospective">Prospective</option>
</select>

• 把判断逻辑修正为检查当前标记的状态是否在选中的数组中，符合includes方法的正确使用规则
• 新增了空选展示所有标记的逻辑，符合多选框的常规交互逻辑
• 循环变量i用let声明，避免全局作用域变量污染
• 去掉了冗余的默认设为可见的逻辑，直接根据判断结果设置可见性即可

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