基于Google Maps V3的游戏六边形网格点击值不一致问题求助

Hey there! Let's work through this hex grid click issue you're facing. The problem where only the bottom-left corner of your hex shows the correct coord_slug points to a common pitfall: you're probably generating the slug from the click position's lat/lng instead of the hex's associated marker coordinates. Here's how to fix it:

1. Bind Marker Data Directly to Each Hexagon #

When creating your hexagons, attach the corresponding marker's lat/lng or pre-generated coord_slug directly to the hex object. This way, no matter where you click on the hex, you'll pull the correct value instead of relying on the click's raw coordinates.

Example code snippet:

// Assume you have a markers array with your point data
markers.forEach(marker => {
  // Create your hexagon using the marker's coordinates
  const hex = createHexagonOverlay(marker.lat, marker.lng);
  
  // Attach the marker's data to the hex object
  hex.associatedMarker = {
    lat: marker.lat,
    lng: marker.lng,
    coord_slug: marker.coord_slug
  };

  // Bind click event to use the attached data
  google.maps.event.addListener(hex, 'click', () => {
    // Use the pre-bound coord_slug instead of calculating from click position
    console.log('Correct coord_slug:', hex.associatedMarker.coord_slug);
    
    // Or regenerate it safely from the marker's fixed coordinates
    const safeSlug = `${hex.associatedMarker.lat.toFixed(2)},${hex.associatedMarker.lng.toFixed(2)}`;
    console.log('Regenerated correct slug:', safeSlug);
  });
});

2. Ensure Full Hexagon Click Detection #

If you're using a custom overlay for your hexagons, double-check that your containsLatLng method correctly identifies clicks across the entire hex shape. A broken hitbox could explain why only the bottom-left triggers the right value.

Here's a reliable polygon point-inclusion check (ray-casting algorithm) to use in your overlay:

HexagonOverlay.prototype.containsLatLng = function(latLng) {
  const pixelPoint = this.getProjection().fromLatLngToDivPixel(latLng);
  return this.isPointInPolygon(pixelPoint, this.hexPixelCoordinates);
};

HexagonOverlay.prototype.isPointInPolygon = function(point, polygonPoints) {
  let isInside = false;
  for (let i = 0, j = polygonPoints.length - 1; i < polygonPoints.length; j = i++) {
    const [xi, yi] = [polygonPoints[i].x, polygonPoints[i].y];
    const [xj, yj] = [polygonPoints[j].x, polygonPoints[j].y];
    
    const crossesEdge = ((yi > point.y) !== (yj > point.y)) &&
      (point.x < (xj - xi) * (point.y - yi) / (yj - yi) + xi);
    if (crossesEdge) isInside = !isInside;
  }
  return isInside;
};

If you're using Google Maps' built-in Polygon class instead of a custom overlay, this step is likely unnecessary—Polygon handles full-shape click detection by default.

3. Standardize Coord_Slug Formatting #

Make sure the coord_slug generation uses consistent precision (e.g., 2 decimal places) for both markers and hexagons. Raw lat/lng values can have tiny decimal differences that break matching. Use toFixed(2) to normalize values:

function generateCoordSlug(lat, lng) {
  return `${lat.toFixed(2)},${lng.toFixed(2)}`;
}

By tying each hex directly to its marker's fixed data, you eliminate the dependency on click position coordinates and ensure the correct coord_slug shows up no matter where the user clicks on the hex.

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