Personalización básica de los marcadores

Selecciona la plataforma: Android iOS JavaScript

Mapa de San Francisco con marcadores de estilo personalizado

Para personalizar la apariencia de los marcadores, pasa una Pin.Configuration instancia a (Marker3D.Style.pin(_:)) lo que te permite cambiar los colores de fondo y de borde, el texto y el color del glifo, la altitud, la imagen que se usará y más opciones para una personalización adicional.

En la siguiente muestra de código, se muestra cómo crear un marcador nuevo y darle estilo con algunas de las opciones de personalización disponibles:

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

En esta página, te indicamos cómo aplicar las siguientes personalizaciones:

Cómo cambiar el tamaño del marcador

Para cambiar el tamaño de un marcador, usa la opción scale:

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

Cómo cambiar el color del fondo

Usa el parámetro backgroundColor en Pin.Configuration para cambiar el color del fondo de un marcador:

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

Cómo cambiar el color del borde

Usa el parámetro borderColor en Pin.Configuration para cambiar el color del borde de un marcador:

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

Cómo agregar texto a un glifo

Usa el parámetro de cierre @ViewBuilder del glifo en Pin.Configuration para reemplazar el glifo predeterminado por un carácter de texto. El glifo de texto del marcador se ajusta con el marcador:

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