Google地圖位置過濾器使用wordpress類別

Question

我必須使用wordpress類別創建谷歌地圖位置過濾器。

我已經創建了名爲「custom」的自定義帖子類型，並且裏面有幾個創建的位置。每個人都有一個類別，並將這些類別輸出到頁面。

我使用ACF臨谷歌地圖extention輸出在我的地圖下方類別的所有位置。

現在，我需要創建一個系統，允許我根據類別進行過濾。如果我點擊一個類別，所有其他位置都隱藏起來。

我不是很強勁，JavaScript，但我可以用簡單的添加/刪除類顯示在我的地圖/隱藏地點？

我當前的代碼，以輸出標誌，在我的地圖：

<?php 

$post_type = 'customcat';  

$taxonomies = get_object_taxonomies(array('post_type' => $post_type)); 

foreach($taxonomies as $taxonomy) : 

    $terms = get_terms($taxonomy, 'orderby=name&hide_empty=1&order=DESC'); 

    foreach($terms as $term) : ?> 

     <div class="town clearfix"> 
      <h2 class="mid-heading"><?php echo $term->name; ?></h2>   
      <?php 
      $args = array(
        'post_type' => $post_type, 
        'posts_per_page' => -1, //show all posts 
        'tax_query' => array(
         array(
          'taxonomy' => $taxonomy, 
          'field' => 'slug', 
          'terms' => $term->slug, 
        ) 
       ) 

      ); 
      $posts = new WP_Query($args); 

      if($posts->have_posts()): while($posts->have_posts()) : $posts->the_post(); ?> 


     <?php endwhile; endif; ?> 
     <?php wp_reset_postdata(); ?> 
     </div> 
    <?php endforeach; 

endforeach; ?> 
     </div> 
     <div class="rendered_map"> 
      <?php 
       query_posts(array( 
        'post_type' => 'customcat', 
        'posts_per_page' => -1, 
      )); 
      ?> 
      <div class="acf-map"> 
      <?php while (have_posts()) : the_post(); ?> 
        <h2><?php the_title(); ?></h2> 
      <?php 
      $location = get_field('aadress'); 
      if(!empty($location)): 
      ?> 
      <div class="marker" style="display:none;" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"> 
       <h4><?php the_sub_field('title'); ?></h4> 
       <p><?php echo get_the_title(); ?></p>        
      </div> 
      <?php endif; ?> 
      <?php endwhile;?> 
      <?php wp_reset_postdata(); ?> 
      </div> 
     </div> 

我的ACF PRO的js代碼是在這裏：

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); 

    }); 


    // center map 
    center_map(map); 


    // return 
    return map; 

} 

/* 
* add_marker 
* 
* This function will add a marker to the selected Google Map 
* 
* @type function 
* @date 8/11/2013 
* @since 4.3.0 
* 
* @param $marker (jQuery element) 
* @param map (Google Map object) 
* @return n/a 
*/ 

function add_marker($marker, map) { 

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

    // create marker 
    var marker = new google.maps.Marker({ 
     position : latlng, 
     map   : map 
    }); 

    // 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 
* 
* This function will center the map, showing all markers attached to this map 
* 
* @type function 
* @date 8/11/2013 
* @since 4.3.0 
* 
* @param map (Google Map object) 
* @return n/a 
*/ 

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 
* 
* This function will render each map when the document is ready (page has loaded) 
* 
* @type function 
* @date 8/11/2013 
* @since 5.0.0 
* 
* @param n/a 
* @return n/a 
*/ 
// global var 
var map = null; 

Answer 1

您可以更改標記添加類別蛞蝓類名稱像這樣：

<div class="marker <?php foreach(get_the_category() as $category) { echo $category->slug . ' ';} ?>" style="display:none;" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"> 

然後在你的JS隱藏/顯示標記依賴這些類。

例如，這監聽器添加到add_marker功能：

google.maps.event.addListener(marker, 'class_changed', function() { 
    if($marker.hasClass($('input[name="marker"]:checked').val())) { 
     marker.setVisible(true); 
    } else { 
     marker.setVisible(false); 
    } 
}); 
$('input[name="marker"]').change(function() { 
    google.maps.event.trigger(marker, 'class_changed'); 
}); 

將隱藏或顯示根據一個複選框的標記物。