Question

您好，

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

过滤器正在运作
Marker clusterer也在工作

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

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

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 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函数？

过滤器和标记聚类器

2 个答案: