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

Question

嗨，

我正在 google 地图 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 上的所有解决方案，但其中 none 有效。

感谢您的帮助。如果有帮助，我可以 post 部分源代码。谢谢。

Answer 1

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

更高效的方法，特别是如果您过滤了很多标记，是清除标记并将过滤后的数组再次添加到 markerClusterer：

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

另外你可以看看markerCluster.repaint()方法。可能你的bug就是这个引起的。

Answer 2

我忘记了一段有用的代码，其中包含 filterByString 函数的变量： </code></p> <pre><code>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 函数？

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

Conflict between filters and marker clusterer

javascript

google-maps-api-3

filter

markerclusterer