Javascript 无法使用复选框切换多个动态Google地图标记点

所以，我一直在努力确定如何解决这个问题已经有一段时间了。我有一个地图点的列表，随着球队的每次更新动态添加。

下面是每个更新的示例：

mapPoints.push(new google.maps.LatLng(33.730362 , -85.792725));
        names.push("Alpha");
        times.push("1425059747829");
        colors.push("Red");

        mapPoints.push(new google.maps.LatLng(33.7304572 , -85.792498));
        names.push("Alpha");
        times.push("1425059747829");
        colors.push("Red");

        mapPoints.push(new google.maps.LatLng(33.7304346 , -85.792634));
        names.push("Alpha");
        times.push("1425059747829");
        colors.push("Red");

        mapPoints.push(new google.maps.LatLng(33.73041 , -85.79264));
        names.push("Alpha");
        times.push("1425059172108");
        colors.push("Blue");

        mapPoints.push(new google.maps.LatLng(33.730312 , -85.792654));
        names.push("Delta");
        times.push("1425059747723");
        colors.push("Blue");



        mapPoints.push(new google.maps.LatLng(33.73023 , -85.79246));
        names.push("Foxtrot");
        times.push("1425059172145");
        colors.push("Purple");


        mapPoints.push(new google.maps.LatLng(33.72476 , -85.788185));
        names.push("Golf");
        times.push("1425050587395");
        colors.push("Green");

基于这些信息，我将每个mapPoint传递到一个google maps标记中，并根据它们的名称对它们进行标记。然后，我根据给定的队名更新一个动态复选框，删除重复项。现在，每当我尝试切换与球队名称相关的所有分数的可见性时，它只会删除一分，而不是全部。任何帮助都将不胜感激

function updateCheckbox(names,markers){

var checkbox = $("#checkBoxes");

//check if names return null if names !=null create a dynamic list of  checkboxes
//based on live squads


if(names!=null){
var $ctrl = $('<input/>').attr({type:'checkbox', checked:'yes',name:'chk'});
$("#checkBoxes").append($ctrl);


//designate squad name to each checkbox
$ctrl.after(names);
console.log(names);
 // toggle display of the squads


 }


 $($ctrl).click(function () {
if (this.checked) {
    if (markers) {
        for (var i=0; i<markers.length;i++) {
            if(markers[i].labelContent==markers){
          markers.setVisible(true);
      }
        }
    }
} else {
    if (markers) {
        for (var i=0; i<markers.length;i++) {
            if(markers[i].labelContent==markers){
          markers.setVisible(false);

         }
                }
              }
           }
      });

       }

函数updateCheckbox（名称、标记）{
var复选框=$（“#复选框”）；
//检查名称是否返回null如果名称！=null创建复选框的动态列表
//以现场小组为基础
如果（名称！=null）{
var$ctrl=$（''）.attr（{类型：'checkbox'，选中：'yes'，名称：'chk'}）；
$（“#复选框”）.append（$ctrl）；
//为每个复选框指定班名
$ctrl.after（名称）；
console.log（名称）；
//切换班的显示
}
$（$ctrl）。单击（函数（）{
如果（选中此项）{
如果（标记）{
对于（var i=0；i您删除了重复项，因此它们与复选框不关联。对标记进行分组并在单击复选框时循环标记将隐藏或显示所有标记：

var squads = {};
//create a hash of squads
for (var i = 0; i < names.length; i++) {
    if (squads[names[i]] === undefined) {
        squads[names[i]] = {markers: [markers[i]]};
    } else {
        squads[names[i]].markers.push(markers[i]);
    }
}
for (squad in squads) {
    updateCheckbox(squad, squads[squad].markers);
}
...
$($ctrl).click(function () {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setVisible(this.checked);
    }
});

var-squads={}；
//创建一个小分队
对于（var i=0；i

我在小提琴中没有看到任何复选框。请尝试我也更新了问题中的链接。我认为它没有显示是因为https标记。如果它不起作用，请尝试将https更改为http。@geocodezip您是否设法使JSFIDLE中的复选框起作用了？仍然没有看到它们。我找到了两个按钮和文本，但没有看到任何复选框B牛。它们应该在哪里？忘了将外部标记作为https加载。下面是工作链接：像符咒一样工作！我也有同样的想法，只是不知道如何执行。我非常感谢您的帮助！