Google Maps iOS SDK：如何实现重叠标记标签的动态隐藏？

Hey there! I've dealt with this exact scenario before when building map-based apps, so let's walk through how to replicate Google Maps' dynamic label hiding behavior for your GMSMarkers that use combined icon+label images.

Core Approach #

The key idea is to track your markers' screen positions as the map camera changes, check for overlaps between their icon bounds, and toggle visibility based on those overlaps. Here's a step-by-step implementation:

1. Keep Track of Your Markers

First, maintain a reference to all your markers in an array so you can iterate over them later:

var mapMarkers: [GMSMarker] = []

When you create each marker (with your combined icon+label image), add it to this array:

let customMarker = GMSMarker(position: yourCoordinate)
customMarker.icon = yourCombinedIconLabelImage
mapMarkers.append(customMarker)
customMarker.map = mapView

2. Listen for Map Camera Changes

We need to recalculate overlaps every time the map is panned, zoomed, or rotated. Use KVO to listen for camera updates:

// Add this in your viewDidLoad or when setting up the map
mapView.addObserver(self, forKeyPath: "camera", options: .new, context: nil)

// Implement the observer method
override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey: Any]?, context: UnsafeMutableRawPointer?) {
    guard keyPath == "camera" else {
        super.observeValue(forKeyPath: keyPath, of: object, change: change, context: context)
        return
    }
    updateMarkerVisibility()
}

3. Calculate Overlaps & Toggle Visibility

Create the updateMarkerVisibility() function to check each marker's screen bounds and hide overlapping ones. We'll prioritize keeping markers that don't overlap with already visible ones:

func updateMarkerVisibility() {
    var visibleMarkerBounds: [CGRect] = []
    
    // Optional: Sort markers by priority if you want to prioritize certain markers (e.g., higher-priority ones stay visible)
    let sortedMarkers = mapMarkers.sorted {
        let priorityA = ($0.userInfo?["priority"] as? Int) ?? 0
        let priorityB = ($1.userInfo?["priority"] as? Int) ?? 0
        return priorityA > priorityB
    }
    
    for marker in sortedMarkers {
        // Convert the marker's geographic position to a screen point
        guard let markerIcon = marker.icon else { continue }
        let screenPoint = mapView.projection.point(for: marker.position)
        
        // Calculate the full screen bounds of the marker (adjust size to match your combined icon+label)
        let iconSize = markerIcon.size
        let markerBounds = CGRect(
            x: screenPoint.x - (iconSize.width / 2),
            y: screenPoint.y - iconSize.height, // Marker anchors are usually at the bottom of the icon
            width: iconSize.width,
            height: iconSize.height
        )
        
        // Check if this marker overlaps with any already visible marker
        let isOverlapping = visibleMarkerBounds.contains { $0.intersects(markerBounds) }
        
        // Toggle visibility
        marker.isHidden = isOverlapping
        
        // If it's visible, add its bounds to our tracking list
        if !isOverlapping {
            visibleMarkerBounds.append(markerBounds)
        }
    }
}

4. Refine for Better Behavior

To make this match Google Maps' behavior more closely, add these tweaks:

• Zoom Level Adaptation: Adjust overlap strictness based on zoom. At low zoom levels, hide more markers; at high zoom, show more:

  let currentZoom = mapView.camera.zoom
  if currentZoom < 12 {
      // Low zoom: Only show high-priority markers, or use a larger "buffer" for overlap checks
      marker.isHidden = isOverlapping || (priorityA < 2)
  } else {
      marker.isHidden = isOverlapping
  }
  

• Clean Up Observations: Don't forget to remove the KVO observer when your view controller is deinitialized:

  deinit {
      mapView.removeObserver(self, forKeyPath: "camera")
  }
  

Alternative Thought: Custom Info Windows? #

While you mentioned the SDK doesn't support native text labels for markers, note that you can use custom GMSInfoWindows if you want labels to appear on tap. But since your use case requires persistent labels, combining the icon and label into a single image (and using the overlap logic above) is the right approach.

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