Question

我试图根据复选框选择和取消选择显示标记，     但我遇到的问题是当用户不断检查并取消勾选复选框时，标记将成倍增加并显示在地图上。     任何人都可以帮我解决这个问题。

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

};

Answer 1

当用户连续检查并解除标记复选框时将乘以并在地图上显示

标记不断增加的原因是创建标记的代码是在for循环中生成的，并且每次勾选复选框时都会触发。我建议你做的是：

创建一个使用for循环生成标记的函数。此功能仅运行一次。
创建单独的函数，在取消选中复选框时将隐藏标记。另一个单独的函数，用于在勾选复选框时显示标记。

演示代码为here。

切换复选框以显示标记

1 个答案: