基于ACF的custom post type地点半径搜索功能开发求助

Got it, let's build that radius search feature for your locations CPT. You've already got ACF storing latitude/longitude, so we just need to add the frontend input, convert user locations to coordinates, and run a custom WP_Query that calculates distance using the Haversine formula. Here's how to do it step by step:

1. Frontend Search Form with Geocoding #

First, add a form to your locations archive template (or wherever you want the search to live) that lets users input a location, then converts that address to lat/lng using a geocoding service (I'll use Google Maps Geocoding as an example, but you can swap in another service if needed):

<form method="GET" action="<?php echo get_post_type_archive_link('locations'); ?>">
  <div class="search-group">
    <label for="search-location">Find nearby locations:</label>
    <input type="text" id="search-location" name="search_location" placeholder="Enter city, address, or zip" required>
    <input type="hidden" id="search-lat" name="lat">
    <input type="hidden" id="search-lng" name="lng">
    <button type="submit">Search</button>
  </div>
</form>

<script>
// Convert user input address to lat/lng on form submit
document.querySelector('form').addEventListener('submit', async function(e) {
  const locationInput = document.getElementById('search-location');
  const latInput = document.getElementById('search-lat');
  const lngInput = document.getElementById('search-lng');

  if (!latInput.value) {
    e.preventDefault();
    try {
      // Replace YOUR_API_KEY with your actual Google Maps Geocoding API key
      const response = await fetch(`https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(locationInput.value)}&key=YOUR_API_KEY`);
      const data = await response.json();

      if (data.results.length > 0) {
        const { lat, lng } = data.results[0].geometry.location;
        latInput.value = lat;
        lngInput.value = lng;
        this.submit();
      } else {
        alert("Sorry, we couldn't find that location. Try a different address.");
      }
    } catch (err) {
      alert("Oops, something went wrong with the location lookup.");
      console.error(err);
    }
  }
});
</script>

2. Custom WP_Query with Distance Calculation #

Next, add these filters to your theme's functions.php file to modify the WP_Query for your locations archive. This uses the Haversine formula to calculate the distance between the user's coordinates and each location's ACF lat/lng:

// Join postmeta tables for latitude and longitude
add_filter('posts_join', 'custom_location_search_join', 10, 2);
function custom_location_search_join($join, $query) {
  global $wpdb;
  // Only run on locations archive when we have lat/lng parameters
  if (is_post_type_archive('locations') && isset($_GET['lat'], $_GET['lng'])) {
    $join .= " JOIN {$wpdb->postmeta} AS lat_meta ON {$wpdb->posts}.ID = lat_meta.post_id AND lat_meta.meta_key = 'latitude'";
    $join .= " JOIN {$wpdb->postmeta} AS lng_meta ON {$wpdb->posts}.ID = lng_meta.post_id AND lng_meta.meta_key = 'longitude'";
  }
  return $join;
}

// Add distance calculation and radius filter
add_filter('posts_where', 'custom_location_search_where', 10, 2);
function custom_location_search_where($where, $query) {
  global $wpdb;
  if (is_post_type_archive('locations') && isset($_GET['lat'], $_GET['lng'])) {
    $user_lat = floatval($_GET['lat']);
    $user_lng = floatval($_GET['lng']);
    $radius = 50; // Default radius in miles - adjust or make this a user-selectable option

    // Haversine formula to calculate distance in miles
    $distance_calc = "(((acos(sin((".$user_lat."*pi()/180)) * sin((lat_meta.meta_value*pi()/180)) + cos((".$user_lat."*pi()/180)) * cos((lat_meta.meta_value*pi()/180)) * cos(((".$user_lng."- lng_meta.meta_value)*pi()/180))))*180/pi())*60*1.1515) AS distance";
    
    // Add the distance calculation to the select and filter by radius
    $where .= " SELECT {$wpdb->posts}.*, {$distance_calc} HAVING distance <= {$radius}";
  }
  return $where;
}

// Sort results by distance (closest first)
add_filter('posts_orderby', 'custom_location_search_orderby', 10, 2);
function custom_location_search_orderby($orderby, $query) {
  if (is_post_type_archive('locations') && isset($_GET['lat'], $_GET['lng'])) {
    $orderby = 'distance ASC';
  }
  return $orderby;
}

// Ensure distinct results (avoids duplicates from postmeta joins)
add_filter('posts_distinct', 'custom_location_search_distinct');
function custom_location_search_distinct($distinct) {
  if (is_post_type_archive('locations') && isset($_GET['lat'], $_GET['lng'])) {
    $distinct = 'DISTINCT';
  }
  return $distinct;
}

3. Display Results with Distance #

Update your locations archive loop to show the calculated distance for each result. We'll recalculate the distance in the loop (since WP_Query doesn't store it by default) and format it nicely:

<?php
if (have_posts()) : ?>
  <h2>Nearby Locations</h2>
  <div class="locations-grid">
    <?php while (have_posts()) : the_post();
      // Get ACF coordinates
      $location_lat = get_field('latitude');
      $location_lng = get_field('longitude');
      $user_lat = floatval($_GET['lat']);
      $user_lng = floatval($_GET['lng']);

      // Calculate distance again for display
      $distance = ((acos(sin(($user_lat*pi()/180)) * sin(($location_lat*pi()/180)) + cos(($user_lat*pi()/180)) * cos(($location_lat*pi()/180)) * cos((($user_lng- $location_lng)*pi()/180))))*180/pi())*60*1.1515;
      $distance = round($distance, 1);
    ?>
      <article class="location-card">
        <h3><?php the_title(); ?></h3>
        <p class="distance"><?php echo $distance; ?> miles away</p>
        <?php if (get_field('address')) : ?>
          <p><?php the_field('address'); ?></p>
        <?php endif; ?>
      </article>
    <?php endwhile; ?>
  </div>
<?php else : ?>
  <p>No locations found within your selected radius.</p>
<?php endif; ?>

Key Notes to Adjust #

• Radius Unit: If you want kilometers instead of miles, replace 1.1515 in the Haversine formula with 1.60934.
• ACF Field Names: Make sure 'latitude' and 'longitude' match the actual field keys in your ACF setup.
• User-Selectable Radius: Add a dropdown to the form with radius options (e.g., 5, 10, 25 miles) and use $_GET['radius'] instead of the hardcoded 50 in the posts_where filter.
• Geocoding Alternative: If you don't want to use Google Maps, you can use OpenStreetMap's Nominatim API instead.
• Performance: For large datasets, consider adding a custom database table to store coordinates and pre-calculate distances, or use spatial indexing if your server supports it.

内容的提问来源于stack exchange，提问作者Chris