取消选中动态复选框 -> 删除标记答案

【问题标题】：Uncheck dynamical checkbox -> remove marker取消选中动态复选框 -> 删除标记
【发布时间】：2013-05-19 17:25:48
【问题描述】：

我真的到处搜索，但在我的代码中找不到我的错误。我有动态加载到复选框中的信息（我的 html 上只有一个复选框），因为我不知道高级时我需要多少个复选框...

这是我的代码，用于检查我的复选框是否被选中，以及其中的内容。值为 lat,lng 和 title

  $(".chkbx").on("change", function() {
   var selected = new Array();
   //marker.setVisible(false);
   //map.removeOverlay(marker);
  //marker.setMap(null);    


   $("input:checkbox[name=checkbox]:checked").each(function() {
   selected.push($(this).val());

   });


  console.log(selected);



for(var i=0; i< selected.length ;i++)
{
    var current = selected[i].split(';');
    var blueIcon = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' + 'chco=FFFFFF,008CFF,000000&ext=.png';
    var siteLatLng = new google.maps.LatLng(current[0], current[1]);

    var marker = new google.maps.Marker({   
        position: siteLatLng,
        map: map,
        icon: blueIcon,
        animation: google.maps.Animation.DROP,

        title: current[2],
        //zIndex: sites[3],
        html: current[2]
    });
    marker.setMap(map);



}

  }

});

我的标记显示在我的谷歌地图上，但无法删除它们......有人可以帮助我或提出建议吗？

【问题讨论】：

标签： google-maps checkbox google-maps-markers

【解决方案1】：

因此，为每个选中的复选框创建一个标记。您需要做的就是将这些标记添加到一个数组中，以便稍后引用。

// global variable
var markers = [];

$(".chkbx").on("change", function() {
    var selected = [];

    // loop through all the markers, removing them from the map:
    for (var marker in markers) {
        marker.setMap(null);
    }

    // then you probably want to clear out the array, so you can then re-insert markers to it
    markers = [];

    $("input:checkbox[name=checkbox]:checked").each(function() {
        selected.push($(this).val());
    });

    for(var i=0; i< selected.length ;i++)
    {
        var current = selected[i].split(';');
        var blueIcon = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' + 'chco=FFFFFF,008CFF,000000&ext=.png';
        var siteLatLng = new google.maps.LatLng(current[0], current[1]);

        var marker = new google.maps.Marker({   
            position: siteLatLng,
            map: map,
            icon: blueIcon,
            animation: google.maps.Animation.DROP,
            title: current[2],
            html: current[2]
        });

        // you don't need this setMap here, you already specified map in your mapOptions:
        // marker.setMap(map);

        markers.push(marker);
    }
});

【讨论】：