Puedes personalizar la apariencia de los marcadores configurando el objeto PinStyle. El tipo PinStyle proporciona opciones para 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 el siguiente ejemplo 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) {
Marker(
position: .init(latitude: 51.5074, longitude: -0.1278, altitude: 0.0),
label: "London",
style: .pin(.init(scale: 2.0))
)
}
En esta página, se muestra cómo personalizar los marcadores de las siguientes maneras:
- Cómo cambiar el tamaño del marcador
- Cómo cambiar el color de fondo
- Cómo cambiar el color del borde
- Cómo agregar texto a un glifo
Cómo aumentar la escala del marcador
Para escalar un marcador, usa la opción scale:
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)}
)
)
}
Cómo cambiar el color del fondo
Usa la opción PinElement.background para cambiar el color de fondo de un marcador:
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
)
}
Cómo cambiar el color del borde
Usa la opción markerOptions.borderColor para cambiar el color del borde de un marcador:
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
)
}
Cómo agregar texto a un glifo
Usa el método markerOptions.glyph 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){
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
}
)
}