Einfache Anpassung von Markierungen

Plattform auswählen: Android iOS JavaScript

Karte von San Francisco mit Markierungen im benutzerdefinierten Stil

Sie können das Aussehen von Markierungen anpassen, indem Sie eine Pin.Configuration Instanz an (Marker3D.Style.pin(_:)) übergeben. So können Sie die Hintergrund- und Rahmenfarben, den Glyphentext und die Glyphenfarbe, Höhe, das zu verwendende Bild ändern und weitere Anpassungsoptionen nutzen.

Im folgenden Codebeispiel wird gezeigt, wie Sie eine neue Markierung erstellen und sie mit einigen der verfügbaren Anpassungsoptionen gestalten:

Map(mode: .hybrid) {
  Marker3D(
      position: .init(latitude: 51.5074, longitude: -0.1278, altitude: 0.0),
      label: "London",
      style: .pin(.init(scale: 2.0))
  )
}

Auf dieser Seite wird beschrieben, wie Sie folgende Anpassungen an Markierungen vornehmen:

Größe der Markierung anpassen

Verwenden Sie die Option scale, um die Größe einer Markierung anzupassen:

Map(mode: .hybrid) {
  Marker3D(
      position: .init(latitude: 35.6762, longitude: 139.6503, altitude: 0.0),
        label: "Tokyo",
        style: .pin(
          .init(
            backgroundColor: .blue,
            borderColor: .yellow,
            scale: 2.0
            ) {Text("G").minimumScaleFactor(0.01)}
        )
  )
}

Hintergrundfarbe ändern

Verwenden Sie den Parameter backgroundColor für Pin.Configuration, um die Hintergrundfarbe einer Markierung zu ändern:

Map(mode: .hybrid){
  Marker3D(
    position: .init(latitude: 48.8566, longitude: 2.3522, altitude: 0.0),
    label: "Paris",
    style: .pin(.init(backgroundColor: .yellow)) // Changes the pin's background color
  )
}

Rahmenfarbe ändern

Verwenden Sie den Parameter borderColor für Pin.Configuration, um die Rahmenfarbe einer Markierung zu ändern:

Map(mode: .hybrid){
  Marker3D(
    position: .init(latitude: -22.9068, longitude: -43.1729, altitude: 0.0),
    label: "Rio de Janeiro",
    style: .pin(.init(backgroundColor: .green, borderColor: .brown)) // Customizes the pin border
  )
}

Text zu einer Glyphe hinzufügen

Verwenden Sie den Closure-Parameter @ViewBuilder für die Glyphe in Pin.Configuration, um die Standardglyphe durch ein Textzeichen zu ersetzen. Die Textglyphe der Markierung wird mit der Markierung skaliert:

Map(mode: .hybrid){
  Marker3D(
    position: .init(latitude: 25.2048, longitude: 55.2708, altitude: 0.0),
    label: "Dubai",
    style: .pin(.init(backgroundColor: .green) {
        Text("D") // Adds text inside the marker glyph
    })
  )
}