Javascript 切换复选框以显示标记_Javascript_Google Maps Api 3

Javascript 切换复选框以显示标记

javascript google-maps-api-3

Javascript 切换复选框以显示标记,javascript,google-maps-api-3,Javascript,Google Maps Api 3,我试图根据复选框选择和取消选择显示标记，但我面临的问题是，当用户不断地检查和取消勾选复选框时，标记将成倍地显示在地图上。谁能帮我解决这个问题我的html文件如下所示 <input type="checkbox" style="float: right;" id="w" ng-click="getworkers()"></input> 下面是我用来显示标记和集群的javascript代码 $scope.getworkers = function(){

我试图根据复选框选择和取消选择显示标记，但我面临的问题是，当用户不断地检查和取消勾选复选框时，标记将成倍地显示在地图上。谁能帮我解决这个问题

我的html文件如下所示

<input type="checkbox" style="float: right;" id="w" ng-click="getworkers()"></input>

下面是我用来显示标记和集群的javascript代码

$scope.getworkers = function(){         
    clearOverlays();       
    bounds = new google.maps.LatLngBounds();
    setTimeout(function(){
        if(document.getElementById('w').checked){
        for(var i=0;i<$scope.responseWorker.length;i++){                

        var latlng = new google.maps.LatLng($scope.responseWorker[i].rep_lat,$scope.responseWorker[i].rep_lon); 
        lat = $scope.responseWorker[i].rep_lat;
        lng=$scope.responseWorker[i].rep_lon;
        name=$scope.responseWorker[i].rep_name;
        address=$scope.responseWorker[i].rep_address;

         bounds.extend(latlng);
         marker = new google.maps.Marker({
             position: latlng,
             map:map,
             animation : google.maps.Animation.DROP,
             icon: "lib/images/green-dot.png"
         });     
         clusterobj.markers.push(marker);

        //Info window
         var infowindow = new google.maps.InfoWindow();                        
            var content =  "<table>" +"<head><h4>All Worker Details</h4></head>"+
             "<tr><td>Name:</td> <td> "+name+" </td> </tr>" + "<tr><td>Address:</td> <td> "+address+"</td></tr>"+ "</table>";


        google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow) {
            return function() {
                if (infowindow)
                    infowindow.close();
                 infowindow.setContent(content); 
              infowindow.open(map, marker);                 
                //map.setZoom(7);
            };
          })(marker, content, infowindow));    

            };
            map.fitBounds(bounds);
            var mcOptions = {styles: [{
                gridSize: 40,
                height: 53,
                url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png",
                width: 53
                },
            ]};      
            clusterobj.mc = new MarkerClusterer(map,clusterobj.markers,mcOptions);
    }
    else if(!document.getElementById('w').checked)
    {
     clusterobj.mc.clearMarkers();                  

    }

    },2000);

};

$scope.getworkers=function（）{
clearOverlays（）；
bounds=新的google.maps.LatLngBounds（）；
setTimeout（函数（）{
if（document.getElementById（'w'）。选中）{
对于（var i=0；i
当用户连续检查并取消勾选复选框时，标记将被删除
将被倍增并显示在地图上
标记不断增加的原因是，创建标记的代码是在for循环中生成的，每次勾选复选框时都会触发。我建议您执行以下操作：
创建一个使用for循环生成标记的函数。此函数只运行一次
创建单独的函数，当复选框未选中时隐藏标记。另一个单独的函数将在复选框被选中时显示标记
演示代码是
当用户连续检查并取消勾选复选框时，标记将被删除
将被倍增并显示在地图上
标记不断增加的原因是，创建标记的代码是在for循环中生成的，每次勾选复选框时都会触发。我建议您执行以下操作：
创建一个使用for循环生成标记的函数。此函数只运行一次
创建单独的函数，当复选框未选中时隐藏标记。另一个单独的函数将在复选框被选中时显示标记
演示代码是