Javascript 过滤器和标记聚类器之间的冲突

你好

我正在谷歌地图API v3（使用Javascript）上制作一个带有过滤器和标记聚类器的交互式地图

• 过滤器正在工作

• Marker clusterer也在工作

但是当我把标记聚类器和过滤器放在一起时，我遇到了一些麻烦

为了让大家更了解我的问题，我在这里放置了一些屏幕： 不带任何过滤器的映射： • 过滤后： •

标记聚类器：

var markerCluster = new MarkerClusterer(map, markers, 
        {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

用于在地图上加载标记的函数：

function loadMarkers(personList) {




    var people = ( typeof personList !== 'undefined' ) ? personList : personData;

    var j = 1; 

    for( i=0; i < people.length; i++ ) {
        var person = people[i];


        if( markerList.indexOf(person.id) !== -1 ) continue;

        var lat = person.lat,
            lng = person.lng,
            markerId = person.id;

        var infoWindow = new google.maps.InfoWindow({
            maxWidth: 400
        });

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng( lat, lng ),
            title: person.nom,
            markerId: markerId,
            icon: markerLocation,
            map: map
        });

        markers[markerId] = marker;
        markerList.push(person.id);

用于筛选标记的函数：

function filterByString( dataProperty, value ) {
    var people = [];

    for( var i=0; i < personData.length; i++ ) {
        var person = personData[i];
        if( person[dataProperty] == value ) {
            people.push( person );
        } else {
            removePersonMarker( person.id );    
        }
    }
    return people;
}

函数filterByString（数据属性，值）{
var people=[]；
对于（var i=0；i

当我使用过滤器时，标记聚类器不会更新，标记会显示在地图上而不会被聚类

我尝试了所有关于堆栈溢出的解决方案，但没有一个有效

---

任何帮助都将不胜感激。如果有帮助的话，我可以发布部分源代码。谢谢。

MarkerClusterer提供了

removeMarker

和

addMarker

方法。使用数组初始化markerClusterer后，还可以根据应用程序的其余部分使用此方法（而不是仅在标记列表中添加和删除它们）

更有效的方法是清除标记并将过滤后的数组再次添加到markerClusterer，尤其是在过滤大量标记的情况下：

markerClusterer.clearMarkers();
markerClusterer.addMarkers(markers);

---

此外，您还可以查看

markerCluster.repaint（）

方法。您的错误可能是由此引起的。

我忘记了一部分有用的代码，其中包含filterByString函数的变量：

function filterCtrl(filterType, value) {
    var results = [];

    if( isInt(value) ) {
        filter[filterType] = parseInt(value);
    } else {
        filter[filterType] = value;
    }

    for( k in filter ) {
        if( !filter.hasOwnProperty(k) && !( filter[k] !== 0 ) ) {
            loadMarkers();
            return false;
        } else if ( filter[k] !== 0 ) {
            results.push( filterMap[k]( filter[k] ) );
        } else {
            // Nothing
        }
    }

    if( filter[filterType] === 0 ) {
        results.push( personData );
    }

    if( results.length === 1 ) {
        results = results[0];
    } else {
        results = reduceArray( results );
    }

    loadMarkers( results );
}

---

我必须在这个函数中添加方法（clearMarkers和addMarkers）而不是filterByString函数吗？

这里我放了一些屏幕

-一张图片抵得上千言万语。。。但对程序员来说不是。。。如果你需要实际的帮助，你需要提供实际的代码好的，谢谢你的帮助。我对在代码中集成这些方法有点迷茫。我用自己的过滤器编辑了一段开源代码，以便在创建自己的地图之前，用这个概念训练自己。我知道如何过滤标记，但markerCluster部分似乎更复杂。为了集成这些方法，我应该编辑所有的代码吗？或者clearMarkers和addMarkers可以很容易地集成到代码中吗？在调用

filterByString

方法后，如果我看对了，您必须添加

clearMarkers

和

addMarkers

部分。缺少调用筛选的部分。在我看来，您的变量名有点混乱，因为

markerList

不是标记对象列表，而是个人ID列表。我会尝试您的解决方案，谢谢。如果你想用我的代码查看整个项目，这里有一个链接：它可以帮助你理解是的……由于这种行为，它应该是markerClusterer缺少的更新。因为这会处理地图上标记的显示。你应该通过编辑而不是将其作为答案发布在问题中。我没有审查你的整个过滤器逻辑，但原则是这样的。1） 将所有标记放在一个数组中，并将其添加到markerClusterer中-现在它们被markerClusterer聚集并处理2）执行筛选逻辑（无论什么）并修改标记数组3）完成筛选后调用

clearMarkers（）

方法并将所有筛选标记添加到markerClusterer中。处理第二步的方式可能有点不同，但这是一种可能性。

function filterCtrl(filterType, value) {
    var results = [];

    if( isInt(value) ) {
        filter[filterType] = parseInt(value);
    } else {
        filter[filterType] = value;
    }

    for( k in filter ) {
        if( !filter.hasOwnProperty(k) && !( filter[k] !== 0 ) ) {
            loadMarkers();
            return false;
        } else if ( filter[k] !== 0 ) {
            results.push( filterMap[k]( filter[k] ) );
        } else {
            // Nothing
        }
    }

    if( filter[filterType] === 0 ) {
        results.push( personData );
    }

    if( results.length === 1 ) {
        results = results[0];
    } else {
        results = reduceArray( results );
    }

    loadMarkers( results );
}