取消選中動態複選框 - >刪除標記

Question

我真的到處搜索，但是在代碼中找不到我的錯誤。我有信息是動態加載到一個複選框（我只有一個複選框在我的HTML），因爲我不知道在多少複選框，我將需要...

這是我的代碼來檢查，如果我的複選框是檢查，它是什麼。該值是緯度，經度和標題

$(".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); 



} 

    } 

});  

我的標記顯示我的谷歌地圖上，但它不可能刪除它們......有人可以幫我或暗示什麼？

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