Wordpress ACF 和 google 地图按类别过滤...和缩放

Question

我正在 google map 和 acf 在 wordpress 站点。

场景：

我的目标是创建一个按类别过滤的地图：帖子是城市，它们被分组到类别中，类别是国家。我为每个类别创建了一个单选按钮列表，当我点击它时，我一次只显示一个类别。

问题：

问题是，当我单击单选按钮并显示国家/地区的标记时，我想放大该国家/地区。地图保持相同的缩放级别。我知道网络上有很多类似的例子，但是 none 当我点击我的单选按钮时它们会使地图放大。

我试过的和我的代码：

我也尝试过集群，在这种情况下缩放有效，但对我来说挑战是让它与过滤器一起工作（单选按钮或复选框或 select..）。

在此先感谢任何可以帮助我的人！！ :)

这里是 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        : 4,
        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

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


                }else{
                    element.setVisible(false);
                }
            });
            } 
            else 
            {
            map.markers.forEach(function(element) {
                if(element.category != filterValue) {
                    element.setVisible(false);
                }
            });
        }
    });
    $markers.each(function(){
        add_marker( $(this), map );
    }); 

    // 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


    });
    // add to array
    map.markers.push( marker );
    //first hide all the markers
    marker.setVisible(false);

    // 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() {
            if (typeof( window.infoopened ) != 'undefined') infoopened.close();
              infowindow.open(map,marker);
              infoopened = infowindow;

    });
    }
}
// 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 );
        map.fitBounds(bounds);

    });
    // 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(){
        $('.acf-map').each(function(){
            // create map
            map = new_map( $(this) );
        });
    });

})(jQuery);

这是 html/php 部分：

<div class="map-container">
        <?php
        $terms = get_field('category_select');
        if( $terms ): ?>
        <?php foreach( $terms as $term ): 
        $args = array(
            'post_type' => 'post', 
            'category__in' => $term
            );
        $the_query = new WP_Query($args); 
;?><div class="acf-map"><?php
        while ( $the_query->have_posts() ) : $the_query->the_post();
        $location = get_field('google_maps');?>

        <?php
        if( !empty($location) ) { 
            ?>
            <div class="marker" data-category="<?php echo $term->slug ;?>" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
                <?php the_post_thumbnail('thumbnail'); ?>
                <h4><a href="<?php the_permalink(); ?>" rel="bookmark"> <?php the_title(); ?></a></h4>
                <p class="address"><?php echo $location['address']; ?></p>
            </div>
            <?php
        }
        endwhile; 
        wp_reset_postdata();
        endforeach ;?>  
        <?php endif; ?>
    </div>
</div>

Answer 1

谢谢！

终于搞定了，但是代码可能不是最好的..

我保持 php 文件不变，但像这样更改了 js 文件：

在 new_map 函数中，我添加了一个新的 google.maps.LatLngBounds()，如果标记可见，我将边界扩展为：bounds.extend($markers.getPosition()).

一开始我所有的标记都是隐藏的，marker.setVisible(false)在add_marker函数中。

当我点击单选按钮时，地图会缩放到所选国家！！

这是我的代码：

(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        : 4,
        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
    $('.virtual-map-filter').on('change', 'input[type="radio"]', function() 
{
        filter = $(this);
        filterValue = filter.val();
        if(filter.is(':checked')) {
            var bounds = new google.maps.LatLngBounds();
            map.markers.forEach(function( $markers) {
                if( $markers.category == filterValue) {
                     $markers.setVisible(true); 

                    bounds.extend(  $markers.getPosition() );

                }else{
                     $markers.setVisible(false);
                }
            });
               map.fitBounds(bounds);
            } 
    });
    // 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


    });
    // add to array
    map.markers.push( marker );
    //first hide all the markers
    marker.setVisible(false);

    // 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() {
            if (typeof( window.infoopened ) != 'undefined') 
            infoopened.close();
              infowindow.open(map,marker);
              infoopened = infowindow;

    });
    }
}
// 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 );
        map.fitBounds(bounds);

    });
    // 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(){
        $('.acf-map').each(function(){
            // create map
            map = new_map( $(this) );
        });
    });

 })(jQuery);

Wordpress ACF 和 google 地图按类别过滤...和缩放

Wordpress ACF and google map filter by category...and zoom

wordpress

google-maps

dictionary

geocode

advanced-custom-fields