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

时间:2013-05-16 16:54:57

标签: google-maps checkbox google-maps-markers

我真的到处搜索,但我在代码中找不到我的错误。我有动态加载到复选框的信息(我的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);



}

  }

});     

我的标记在我的谷歌地图上显示但是不可能删除它们...有人可以帮助我或建议一些东西吗?

1 个答案:

答案 0 :(得分:0)

因此,对于每个选中的复选框,您都可以创建标记。您需要做的是将这些标记添加到一个稍后可以引用的数组中。

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