As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.
# Como adicionar controle no mapa
O Amazon Location Service permite que você adicione vários controles ao mapa, incluindo navegação, geolocalização, tela cheia, escala e controles de atribuição.
+ **Controle de navegação**: contém botões de zoom e uma bússola.
+ **Controle de geolocalização**: fornece um botão que usa a API de geolocalização do navegador para localizar o usuário no mapa.
+ **Controle de tela cheia**: contém um botão para colocar ou tirar o mapa do modo de tela cheia.
+ **Controle de escala**: exibe a proporção de uma distância no mapa com a distância correspondente no solo.
+ **Controle de atribuição**: apresenta as informações de atribuição do mapa. Por padrão, o controle de atribuição é expandido (independentemente da largura do mapa).
Você pode adicionar os controles a qualquer canto do mapa: canto superior esquerdo, canto inferior esquerdo, canto inferior direito ou canto superior direito.
## Adicionar controles do mapa
No exemplo a seguir, você adicionará os controles do mapa listados acima.
### Exemplo de código de controle do mapa
------
#### [ index.html ]
```
Map Controls
```
------
#### [ style.css ]
```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```
------
## Dicas para o desenvolvedor
### Opções de controle de navegação
```
new maplibregl.NavigationControl({
showCompass: true, // show or hide compass (default: true)
showZoom: true // show or hide zoom controls (default: true)
});
```
### Opções de controle de geolocalização
```
new maplibregl.GeolocateControl({
positionOptions: { enableHighAccuracy: true }, // default: false
trackUserLocation: true // default: false
});
```
### Opções de controle de atribuição
```
new maplibregl.AttributionControl({
compact: true, // compact (collapsed) mode (default: false)
});
```
### Opções de controle de escala
```
new maplibregl.ScaleControl({
maxWidth: 100, // width of the scale (default: 50)
unit: 'imperial' // imperial or metric (default: metric)
});
```
### Opções de controle de tela cheia
```
map.addControl(new maplibregl.FullscreenControl({
container: document.querySelector('body') // container for fullscreen mode
}));
```