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 PinStyle Typ bietet Optionen zum Ändern der Hintergrund- und Rahmenfarben, des Glyphentexts und der Glyphenfarbe, Höhe , des zu verwendenden Bildes 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 formatieren:

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

Mit der Option PinElement.background können Sie die Hintergrundfarbe einer Markierung ä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

Mit der Option markerOptions.borderColor können Sie die Rahmenfarbe einer Markierung ä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

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){
  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
    }
  )
}