基于Google Maps JS API实现自定义标记及就近户外健身场地搜索需求

Hey there! You’re already off to a solid start with your map and markers—let’s work through the remaining pieces to get that search feature up and running. Here’s a step-by-step breakdown tailored to your setup:

1. Convert User-Entered Address/County to Coordinates #

First, you need to turn the user’s text input (like "Manchester, UK" or "Cumbria") into a set of latitude and longitude coordinates. You’ll use a geocoding service for this. Here’s a simplified async function to handle this (just plug in your preferred geocoding service’s API call):

async function getCoordinatesFromAddress(address) {
  try {
    // Replace this with your geocoding service's API request
    const response = await fetch(`[geocoding-api-endpoint]?address=${encodeURIComponent(address)}`);
    const data = await response.json();
    if (data.results.length === 0) {
      throw new Error("Couldn't find that location—please double-check your input!");
    }
    const { lat, lng } = data.results[0].geometry.location;
    return { lat, lng };
  } catch (err) {
    alert(err.message);
    return null;
  }
}

2. Calculate Distance Between User’s Location and Each Marker #

Next, you’ll need to calculate the spherical distance between the user’s coordinates and every marker in your array. The Haversine formula is the standard for this—it accounts for the Earth’s curvature, so you’ll get accurate real-world distances. Here’s a reusable function:

function calculateHaversineDistance(userLat, userLng, markerLat, markerLng) {
  const earthRadiusKm = 6371; // Use 3956 if you want miles instead
  const dLat = (markerLat - userLat) * Math.PI / 180;
  const dLng = (markerLng - userLng) * Math.PI / 180;
  const a = 
    Math.sin(dLat/2) * Math.sin(dLat/2) +
    Math.cos(userLat * Math.PI / 180) * Math.cos(markerLat * Math.PI / 180) * 
    Math.sin(dLng/2) * Math.sin(dLng/2);
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
  return earthRadiusKm * c; // Returns distance in kilometers
}

3. Filter and Sort Markers by Distance #

Once you have the user’s coordinates, loop through your markers array, calculate each marker’s distance, then sort them from closest to farthest. You can also add a filter to only show results within a specific radius (e.g., 15km) to keep results relevant:

async function findNearestLocations(userAddress) {
  const userCoords = await getCoordinatesFromAddress(userAddress);
  if (!userCoords) return;

  // Attach distance value to each marker
  const markersWithDistance = markers.map(marker => ({
    ...marker,
    distance: calculateHaversineDistance(
      userCoords.lat, 
      userCoords.lng, 
      marker.lat, 
      marker.lng
    )
  }));

  // Sort by closest first, then filter to show only within 15km (optional)
  const nearestLocations = markersWithDistance
    .sort((a, b) => a.distance - b.distance)
    .filter(marker => marker.distance <= 15);

  // Update your map to highlight results—e.g., change marker icons or show a results list
  updateMapWithResults(nearestLocations);
}

// Example function to refresh the map with filtered results
function updateMapWithResults(results) {
  // Reset all markers to default first
  markers.forEach(marker => marker.setIcon(/* your default marker icon URL */));
  
  // Highlight the nearest locations
  results.forEach(result => {
    result.setIcon(/* your highlighted marker icon URL */);
    // Optional: Open info windows or add results to a sidebar list
  });
}

4. Prep for Future MySQL Migration #

Since you plan to move markers to MySQL later, keep these points in mind now to make the transition seamless:

• MySQL supports spatial data types like POINT—store each marker’s lat/lng as a POINT column when you migrate.
• Instead of calculating distances client-side, use MySQL’s ST_Distance_Sphere() function to compute distances directly in your database query. This is way more efficient for large datasets—you’ll only fetch the closest results instead of the entire marker list.

Quick Polish Tips #

• Add a loading spinner next to the search button while geocoding and distance calculations are running, so users know something’s happening.
• Handle edge cases gracefully: show a friendly message if no results are found, or if the user enters an invalid address.
• Let users toggle between kilometers and miles if you want to make the feature more accessible.

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