Einfache Anpassung von Markierungen

Plattform auswählen: Android iOS JavaScript

Karte von San Francisco mit benutzerdefinierten Markierungen

Sie können die Darstellung von Markierungen anpassen, indem Sie das PinStyle-Objekt konfigurieren. Der Typ PinStyle bietet Optionen zum Ändern der Hintergrund- und Rahmenfarben, des Glyphentexts und der Glyphenfarbe, der Höhe, des zu verwendenden Bilds und weitere Optionen für zusätzliche Anpassungen.

Das folgende Codebeispiel zeigt, wie Sie eine neue Markierung erstellen und sie mit einigen der verfügbaren Anpassungsoptionen gestalten:

Map(mode: .hybrid) {
  Marker(
      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) {
  Marker(
      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

Mit der Option PinElement.background können Sie die Hintergrundfarbe einer Markierung ändern:

Map(mode: .hybrid){
  Marker(
    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

Mit der Option markerOptions.borderColor können Sie die Rahmenfarbe einer Markierung ändern:

Map(mode: .hybrid){
  Marker(
    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

Mit der Methode markerOptions.glyph können Sie die Standardglyphe durch ein Textzeichen ersetzen. Die Textglyphe der Markierung wird mit der Markierung skaliert:

Map(mode: .hybrid){
  Marker(
    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
    }
  )
}