javascript - 无法使用复选框切换多个动态 Google map 标记点

Question

所以，很长一段时间以来，我一直在尝试确定如何解决这个问题。我有一个 map 点列表，随着小队的每次更新动态添加。 JSFIDDLE

以下是每次更新的示例:

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 传递到谷歌地图标记中，并根据它们的名称对其进行标记。然后，我根据给定的小队名称更新动态复选框，删除重复项。现在，每当我尝试切换与小队名称关联的所有点的可见性时，它只会删除一个点而不是所有点。任何帮助将不胜感激!

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);

         }
                }
              }
           }
      });

       }

Answer 1

您删除了重复项，因此它们不与复选框相关联。对标记进行分组并在单击复选框时循环遍历它们将隐藏或全部显示它们:

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);
    }
});

Updated fiddle here.