Markers

Markers are a SwiftUI convenience feature that creates customizable pin-style markers displayed above the map. They are ideal for quickly symbolizing a point on the map without needing custom image assets.

Benefits:

• No image assets required - uses built-in default marker design
• Simple API with essential customization options (color, stroke, inner color, text)
• Quick to implement for common use cases

Limitations:

• SwiftUI only (not available in UIKit)
• Limited styling compared to annotations or view annotations
• Less efficient for large datasets (100+ markers)

Experimental Feature

Markers are currently marked as experimental with @_spi(Experimental). Import MapboxMaps with @_spi(Experimental) import MapboxMaps to use this feature.

Adding a basic marker

The simplest way to add a marker is to specify a coordinate:

import SwiftUI
@_spi(Experimental) import MapboxMaps

struct MyMapView: View {
    var body: some View {
        Map {
            Marker(coordinate: CLLocationCoordinate2D(latitude: 40.7128, longitude: -74.0060))
        }
    }
}

Customizing markers

You can customize markers with colors, strokes, and text:

Colors and strokes

Map {
    Marker(coordinate: CLLocationCoordinate2D(latitude: 40.7128, longitude: -74.0060))
        .color(.blue)           // Set the main marker color
        .stroke(.purple)        // Add a stroke color
        .innerColor(.white)     // Set the inner circle color
}

Adding text

Map {
    Marker(coordinate: CLLocationCoordinate2D(latitude: 40.7128, longitude: -74.0060))
        .color(.red)
        .text("New York City")
}

Removing strokes

To remove the stroke, set it to nil:

Map {
    Marker(coordinate: CLLocationCoordinate2D(latitude: 40.7128, longitude: -74.0060))
        .stroke(nil)  // No stroke
}

Adding multiple markers

Use ForEvery to add multiple markers from a data collection:

struct Location {
    let id: UUID
    let coordinate: CLLocationCoordinate2D
    let name: String
}

struct MyMapView: View {
    let locations: [Location] = [
        Location(id: UUID(), coordinate: CLLocationCoordinate2D(latitude: 40.7128, longitude: -74.0060), name: "New York"),
        Location(id: UUID(), coordinate: CLLocationCoordinate2D(latitude: 34.0522, longitude: -118.2437), name: "Los Angeles"),
        // ... more locations
    ]
    
    var body: some View {
        Map {
            ForEvery(locations, id: \.id) { location in
                Marker(coordinate: location.coordinate)
                    .color(.red)
                    .text(location.name)
            }
        }
    }
}

Removing markers

In SwiftUI, Markers conform to MapContent. Removing them from the Map block will also remove them from the map. This also works for conditional rendering. The code snippet below uses an if statement and a boolean state variable to control the visibility of a Marker.

@State var showMarker = false
Map {
    if showMarker {
        Marker(coordinate: CLLocationCoordinate2D(latitude: 40.7128, longitude: -74.0060))
          .color(.blue)
          .stroke(.purple)
          .innerColor(.white)
    } 
}

Performance considerations

Markers create separate SwiftUI views, so performance may degrade with large numbers of markers. For scenarios with 100+ markers, consider:

• Using PointAnnotation instead for better performance
• Using Style Layers for maximum performance with large datasets

このpageは役に立ちましたか？