Javascript gmaps.js根据特定标准删除标记

我正在使用gmaps.js创建一张地图，上面有不同类型的标记（停车、居住和学术）。gmaps.js的

removeMarkers（）

函数不接受任何参数，它只是隐藏了所有内容

我的目标是为每个类别设置复选框，在复选框是否选中时显示/隐藏相应的标记。与此类似，这是从一个链接。我的代码与上述问题中的代码类似，但当我选中其中一个框时，我在控制台中得到

uncaughttypeerror:无法读取
jquery.min.js:2
中未定义的属性“length”。另一个不同之处是，我从一个JSON文件获取数据，并将其存储到一个数组中

这是我的密码：

$.getJSON("json/map-data.json", function(data) {
    gMarkers['parking'] = [], gMarkers['academic'] = [], gMarkers['residence'] = [];
    // Loop through each feature in the JSON file
    for (var i = 0; i < data.features.length; i++) {
        features.push(data.features[i]);
        types.push(features[i].properties.type);
        descriptions.push(features[i].properties.description);
        titles.push(features[i].properties.title);
        markers.push(features[i].geometry.point);
        polygons.push(features[i].geometry.polygon);
        // store JSON data to temporary variable to later push to an array
        var markerForArray = {
            lat: markers[i][0],
            lng: markers[i][4],
            title: titles[i],
            infoWindow: {
                content: descriptions[i]
            }
        };

        // Store markerForArray sorted by "type"
        if (types[i] === 'parking')
            gMarkers['parking'].push(markerForArray);
        else if (types[i] === 'residence')
            gMarkers['residence'].push(markerForArray);
        else if (types[i] === 'academic')
            gMarkers['academic'].push(markerForArray);
    };

    /* Takes the poi type as a parameter */
    GMaps.prototype.addMarkersOfType = function (poi_type) {
        // save the relevant map
        console.log(gMarkers['parking'][0]);
        var theMap = this.map;
        // clear markers of this type
        realMarkers[poi_type]=[];
        // for each Gmaps marker
        $.each(gMarkers[poi_type],function(index, obj){
            // add the marker
            var marker = map.addMarkers(obj);
            // save it as real marker
            realMarkers[poi_type].push(marker);
       });
    }

    /* Takes the poi type as a parameter */
    GMaps.prototype.removeMarkersOfType = function (poi_type) {
        // for each real marker of this type
        $.each(realMarkers[poi_type], function(index, obj){
            // remove the marker
            obj.setMap(null);
        });
        // clear markers of this type
        realMarkers[poi_type]=[];
    }

    $('input[type="checkbox"').click(function() {
        var poi_type = $(this).attr('name');
        if ($(this).is(':checked'))
            map.addMarkersOfType(poi_type);
        else
            map.removeMarkersOfType(poi_type);
    });
});

以下是我在JSFIDLE上的代码：
我必须承认我没有试图找到问题所在，因为您的方法似乎并不可取，所有这些存储不同对象的数组都是不必要的

而是为每个复选框创建一个复选框，并为此MVCObject创建一个属性，该属性的值将通过更改侦听器设置为map（选中）或null（未选中）

   mapData.features.forEach(function(item){
     //the checkbox related to the item-type
     var box= $('#'+item.properties.type);

     if(!box.data('mvc')){        
       //create a MVCObject and store it via checkbox-data
       box.data('mvc',new google.maps.MVCObject())
       //add a change-listener
       .change(function(){
       //set the map-property of the MVCObject to the map or null
          box.data('mvc').set('map',(box.prop('checked'))
                                      ? map.map
                                      : null)
       }).trigger('change');          
     }

     //create marker
     var marker=map.createMarker({
       lat:item.geometry.point[0],
       lng: item.geometry.point[1],
       map: box.data('mvc').get('map'),
       title: item.properties.title,
       infoWindow: {
          content: $('<div/>')
                    .append($('<h1/>').text(item.properties.title))
                    .append($('<p/>').text(item.properties.description))[0]
           }
     });

     //create polygon
     var polygon=map.drawPolygon({
       paths:item.geometry.polygon,
       map: box.data('mvc').get('map')
     });

     //bind the map-property of the marker & polygon
     //to the ma-property of the MVCObject
     marker.bindTo('map',box.data('mvc'),'map',true);
     polygon.bindTo('map',box.data('mvc'),'map',true);

   });


停车场


学术的


住宅
请提供一个演示此问题的示例。此处为：，对此表示抱歉。
   mapData.features.forEach(function(item){
     //the checkbox related to the item-type
     var box= $('#'+item.properties.type);

     if(!box.data('mvc')){        
       //create a MVCObject and store it via checkbox-data
       box.data('mvc',new google.maps.MVCObject())
       //add a change-listener
       .change(function(){
       //set the map-property of the MVCObject to the map or null
          box.data('mvc').set('map',(box.prop('checked'))
                                      ? map.map
                                      : null)
       }).trigger('change');          
     }

     //create marker
     var marker=map.createMarker({
       lat:item.geometry.point[0],
       lng: item.geometry.point[1],
       map: box.data('mvc').get('map'),
       title: item.properties.title,
       infoWindow: {
          content: $('<div/>')
                    .append($('<h1/>').text(item.properties.title))
                    .append($('<p/>').text(item.properties.description))[0]
           }
     });

     //create polygon
     var polygon=map.drawPolygon({
       paths:item.geometry.polygon,
       map: box.data('mvc').get('map')
     });

     //bind the map-property of the marker & polygon
     //to the ma-property of the MVCObject
     marker.bindTo('map',box.data('mvc'),'map',true);
     polygon.bindTo('map',box.data('mvc'),'map',true);

   });