동적 체크 박스를 선택 취소 -> 마커 제거

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



} 

    } 

});  

내 마커 내 구글지도에 표시 LNG와 제목이지만 누군가가 나를 도와 줄 것을 제안 해주십시오 수 있습니다 ... 그들을 제거하는 것은 불가능하다?

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