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

Question

嗨，

我正在使用过滤器和标记聚类器在 google maps API v3（使用 Javascript）上制作交互式地图。

• 过滤器正在工作

• 标记聚类器也在工作

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

在这里我放了一些关于我的问题的屏幕以便更容易理解： 没有任何过滤器的地图： • http://prnt.sc/dzlzhk 过滤后： • http://prnt.sc/dzlzog

标记聚类器：

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 removePersonMarker(id) {
    if( markers[id] ) {
        markers[id].setMap(null);
        loc = markerList.indexOf(id);
        if (loc > -1) markerList.splice(loc, 1);
        delete markers[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;
}

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

我尝试了 Stack Overflow 上的所有解决方案，但都没有奏效。

感谢任何帮助。如果它可以帮助我可以发布部分源代码。谢谢。

Answer 1

MarkerClusterer 提供removeMarker(s) 和addMarker(s) 方法。使用数组初始化 markerClusterer 后，您还可以使用此方法（而不是仅在标记列表中添加和删除它们），具体取决于应用程序的其余部分。

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

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

此外，您可以查看markerCluster.repaint() 方法。可能您的错误是由此引起的。

Answer 2

我忘记了一部分有用的代码，其中包含 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 函数？