WordPress门店位置搜索插件及类Zomato网站功能实现问询

Hey there! Let's tackle your two questions about building a location-aware WordPress site—whether you're looking for ready-made plugins or custom development steps, I've got you covered.

If you don't want to build everything from scratch, these plugins are solid options for location-based store search:

• WP Store Locator: The go-to choice for most users. It integrates seamlessly with Google Maps, lets users search stores by address/zip code, and you can bulk import store locations. You can customize store details (hours, contact info) and set search radius limits. It’s fully mobile-responsive too, which is crucial for on-the-go users.
• Locatoraid Store Locator: Great if you need more flexibility. Supports multiple map providers (Google, Bing), lets you add custom fields for stores, and generates shortcodes to embed search functionality anywhere on your site. Results are sorted by distance, and you can export store data for analytics.
• GeoDirectory: Ideal if you’re building a full local directory (like a Yelp/Zomato hybrid). It allows user-submitted business listings (if you want that feature), advanced location filters, and plays well with most WordPress themes. It’s highly extensible with add-ons for reviews, events, and more.

If you’re going the custom route to replicate Zomato’s core features, here’s how to approach each part:

2.1 User Location Detection & Store Filtering #

First, you need to detect user location and filter stores accordingly:

• Automatic Geolocation: Use the browser’s Geolocation API to request the user’s current position on page load. Here’s a quick JavaScript snippet to handle that:

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      const userLat = position.coords.latitude;
      const userLng = position.coords.longitude;
      // Send coords to your WordPress backend to filter stores
      fetch('/wp-json/custom/v1/filter-stores', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({lat: userLat, lng: userLng})
      })
      .then(res => res.json())
      .then(data => {
        // Update the store list on your page
        document.getElementById('store-list').innerHTML = data.html;
      });
    }, function(error) {
      // Fallback if user denies location access: show manual address input
      document.getElementById('manual-location-form').style.display = 'block';
    });
  }
  

• Manual Location Fallback: Always include a form for users to input their address. Use Google’s Geocoding API to convert the address to coordinates—most store plugins have this built-in, but you can add it custom too.
• Backend Store Filtering: Create a custom post type (e.g., "Restaurants") and add custom fields to store each restaurant’s latitude and longitude. Use the Haversine formula to calculate distance between the user’s position and each restaurant, then filter results. Here’s a PHP snippet for the distance calculation:

  function calculate_distance($lat1, $lon1, $lat2, $lon2) {
    $earth_radius = 6371; // Kilometers (use 3956 for miles)
    $dlat = deg2rad($lat2 - $lat1);
    $dlon = deg2rad($lon2 - $lon1);
    $a = sin($dlat/2) * sin($dlat/2) + cos(deg2rad($lat1)) * cos(deg2rad($lat2)) * sin($dlon/2) * sin($dlon/2);
    $c = 2 * atan2(sqrt($a), sqrt(1-$a));
    return round($earth_radius * $c, 1);
  }
  

  You can use this in a custom REST API endpoint or a WP_Query to return only stores within a specific radius.

2.2 Displaying Delivery Time from Restaurant to User's Location #

To show accurate delivery times, use a map service’s Distance Matrix API (like Google Maps):

• Proxy the API Request: Never expose your API key directly in frontend code—create a custom WordPress REST endpoint to handle the request. Here’s the PHP code for the endpoint:

  add_action('rest_api_init', function() {
    register_rest_route('custom/v1', '/delivery-time', [
      'methods' => 'POST',
      'callback' => 'fetch_delivery_time',
      'permission_callback' => '__return_true' // Adjust permissions as needed
    ]);
  });
  
  function fetch_delivery_time($request) {
    $restoLat = $request->get_param('restoLat');
    $restoLng = $request->get_param('restoLng');
    $userLat = $request->get_param('userLat');
    $userLng = $request->get_param('userLng');
    $apiKey = 'YOUR_GOOGLE_MAPS_API_KEY'; // Replace with your key
  
    $apiUrl = "https://maps.googleapis.com/maps/api/distancematrix/json?origins={$restoLat},{$restoLng}&destinations={$userLat},{$userLng}&mode=driving&key={$apiKey}";
    $response = wp_remote_get($apiUrl);
  
    if (is_wp_error($response)) {
      return new WP_Error('api_failure', 'Failed to retrieve delivery time', ['status' => 500]);
    }
  
    return json_decode(wp_remote_retrieve_body($response));
  }
  

• Frontend Integration: When the user selects a restaurant, call your custom endpoint to get the delivery time and display it on the page:

  function showDeliveryTime(restoLat, restoLng, userLat, userLng) {
    fetch('/wp-json/custom/v1/delivery-time', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({restoLat, restoLng, userLat, userLng})
    })
    .then(res => res.json())
    .then(data => {
      if (data.status === 'OK') {
        const duration = data.rows[0].elements[0].duration.text;
        document.getElementById('delivery-time').textContent = `Estimated Delivery Time: ${duration}`;
      } else {
        document.getElementById('delivery-time').textContent = 'Could not calculate delivery time. Please try again.';
      }
    })
    .catch(err => {
      console.error('Error fetching delivery time:', err);
      document.getElementById('delivery-time').textContent = 'Failed to load delivery time.';
    });
  }
  

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