使用复选框和高级自定义字段过滤Google地图标记

Question

我正在使用高级自定义字段在WordPress中添加Google地图标记。我有一组过滤器对标记进行分类。我的目标是仅显示已检查过滤器的地图标记。我在Stack Overflow上找到了几个例子，但这些例子中的大多数都是使用json数据或静态数组。我的JS技能不在我可以将其转化为我的情况的水平。

以下是位于地图上方的过滤器的HTML：

<article class="map-filters">
    <div class="map-filters__inner">
        <ul class="map-filters__wrap">
            <li><label for="category1"><input type="checkbox" name="filter" value="category1" id="category1" checked>Category 1</label></li>
            <li><label for="category2"><input type="checkbox" name="filter" value="category2" id="category2" checked>Category 2</label></li>
            <li><label for="category3"><input type="checkbox" name="filter" value="category3" id="category3" checked>Category 3</label></li>
        </ul>
    </div>
</article>

这是地图本身的HTML。同样，我使用ACF转发器字段来动态添加地图标记，但我为此示例提供了静态HTML：

<article id="js-community-map" class="community-map">
    <div class="marker" data-category="category1"  data-icon="category1.png" data-lat="35.9491598" data-lng="-115.1354093">Marker Content</div> 
    <div class="marker" data-category="category2"  data-icon="category2.png" data-lat="35.9320515" data-lng="-115.1236344">Marker Content</div> 
    <div class="marker" data-category="category3"  data-icon="category2.png" data-lat="35.9327263" data-lng="-115.1246636">Marker Content</div> 
</article> 

最后，是js。由于使用了高级自定义字段，您会发现它与典型的Google Maps JS略有不同，但应该非常相似。我遇到的问题是我不知道在此代码中添加过滤功能的位置。我的过滤代码也可能不正确。我尝试在几个地方添加过滤，包括new_map函数，但似乎没有任何效果。如果有人可以帮我解决这个问题，将不胜感激。

(function($) {

    // New Map  
    // This function will render a Google Map onto the selected jQuery element
    function new_map( $el ) {

        // var
        var $markers = $el.find('.marker');

        // args
        var args = {
            zoom        : 16,
            center      : new google.maps.LatLng(0, 0),
            mapTypeId   : google.maps.MapTypeId.ROADMAP
        };

        // create map               
        var map = new google.maps.Map( $el[0], args);

        // add a markers reference
        map.markers = [];

        // add markers
        $markers.each(function(){
            add_marker( $(this), map );
        });

        // center map
        center_map( map );

       // return
       return map;
    }

    // Add Marker
    function add_marker( $marker, map ) {

        // vars
        var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
        var category = $marker.data('category'); // Get category name from data

        // create marker
        var marker = new google.maps.Marker({
            position    : latlng,
            map         : map,
            category    : category, // store category as property of marker
            icon        : iconUrl.image + $marker.attr('data-icon') // Custom icon from data attribute
        });

        // add to array
        map.markers.push( marker );

        // if marker contains HTML, add it to an infoWindow
        if( $marker.html() ) {

            // create info window
            var infowindow = new google.maps.InfoWindow({
                content     : $marker.html()
            });

            // show info window when marker is clicked
            google.maps.event.addListener(marker, 'click', function() {
                map.panTo(this.getPosition());
                map.setZoom(15);
                infowindow.open( map, marker );
            });
        }
    }

    // Center Map   
    function center_map( map ) {

        // vars
        var bounds = new google.maps.LatLngBounds();

        // loop through all markers and create bounds
        $.each( map.markers, function( i, marker ){
            var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
            bounds.extend( latlng );
        });

        // only 1 marker?
        if( map.markers.length == 1 ) {

            // set center of map
            map.setCenter( bounds.getCenter() );
            map.setZoom( 16 );

        } else {

            // fit to bounds
            map.fitBounds( bounds );

        }
    }

    // Document Ready    
    // global var
    var map = null;
    $(document).ready(function(){
        $('#js-community-map').each(function(){

            // create map
            map = new_map( $(this) );

        });
    });
})(jQuery);

以下是我尝试使用的过滤功能。如果我需要更改此代码，请告诉我。另外，如果你可以帮我把它放在上面的JS中，那将非常有帮助。

$(document).on('click', '.map-filters__wrap label', function(){
    $.each(map.markers, function(i, marker) {
        if(marker.category == category) {
            marker.visible = true;
        } else {
            marker.visible = false;
        }
    });
});

Answer 1

对于那些需要使用ACF Google地图进行过滤的人，我能够自行解决这个问题！

以下是过滤器正在运行的更新JS：

(function($) {

    // New Map   
    // This function will render a Google Map onto the selected jQuery element
    function new_map( $el ) {

        // var
        var $markers = $el.find('.marker');

        // vars
        var args = {
            zoom        : 16,
            center      : new google.maps.LatLng(0, 0),
            mapTypeId   : google.maps.MapTypeId.ROADMAP
        };

        // create map               
        var map = new google.maps.Map( $el[0], args);
        // add a markers reference
        map.markers = [];

        // add markers
        $markers.each(function(){
            add_marker( $(this), map );
        });

        // Filter Markers
        $('.map-filters__wrap').on('change', 'input[type="checkbox"]', function ( {
            filter = $(this);
            filterValue = filter.val();
            if(filter.is(':checked')) {
                map.markers.forEach(function(element) {
                    if(element.category == filterValue) {
                        element.setVisible(true);
                    }
                });
            } else {
                map.markers.forEach(function(element) {
                    if(element.category == filterValue) {
                        element.setVisible(false);
                    }
                });
            }
        });

        // center map
        center_map( map );

        // return
        return map;
    }


    // Add Marker 
    function add_marker( $marker, map ) {
        // var
        var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
        var category = $marker.data('category'); // Get category name from data

        // create marker
        var marker = new google.maps.Marker({
            position    : latlng,
            draggable   : true, // set marker to draggable to hide duplicates
            crossOnDrag : false, // hide cross icon on drag event
            map         : map,
            category    : category, // store category as property of marker
            icon        : iconUrl.image + $marker.attr('data-icon') // Custom icon from data attribute
        });

        // add to array
        map.markers.push( marker );

        // if marker contains HTML, add it to an infoWindow
        if( $marker.html() ) {

            // create info window
            var infowindow = new google.maps.InfoWindow({
                content     : $marker.html()
            });

            // show info window when marker is clicked
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open( map, marker );
            });
        }
    }
    // Center Map   
    function center_map( map ) {

        // vars
        var bounds = new google.maps.LatLngBounds();

        // loop through all markers and create bounds
        $.each( map.markers, function( i, marker ){
            var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );
            bounds.extend( latlng );
        });

        // only 1 marker?
        if( map.markers.length == 1 ) {

            // set center of map
            map.setCenter( bounds.getCenter() );
            map.setZoom( 16 );
        } else {

            // fit to bounds
            map.fitBounds( bounds );

        }
    }

    // Document Ready  
    // global var
    var map = null;
    $(document).ready(function(){
        $('#js-community-map').each(function(){
            // create map
            map = new_map( $(this) );
        });
    });
})(jQuery);

Answer 2

感谢您的示例，我是新手，非常有帮助！

只是一个小小的观察，可能会让其他一些新手有点混淆，这里有一个非常小的语法错误：

过滤标记

$('.map-filters__wrap').on('change', 'input[type="checkbox"]', function ( {

那里缺少)，应该是：

过滤标记

$('.map-filters__wrap').on('change', 'input[type="checkbox"]', function () {