Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.
# Come aggiungere il controllo sulla mappa
Amazon Location Service ti consente di aggiungere più controlli alla mappa, tra cui controlli di navigazione, geolocalizzazione, schermo intero, scala e attribuzione.
+ **Controllo della navigazione**: contiene pulsanti di zoom e una bussola.
+ **Controllo della geolocalizzazione**: fornisce un pulsante che utilizza l'API di geolocalizzazione del browser per localizzare l'utente sulla mappa.
+ **Controllo a schermo intero**: contiene un pulsante per attivare e disattivare la modalità a schermo intero.
+ **Controllo della scala**: mostra il rapporto tra una distanza sulla mappa e la distanza corrispondente sul terreno.
+ **Controllo dell'attribuzione**: presenta le informazioni sull'attribuzione della mappa. Per impostazione predefinita, il controllo dell'attribuzione viene ampliato (indipendentemente dalla larghezza della mappa).
Puoi aggiungere i controlli in qualsiasi angolo della mappa: in alto a sinistra, in basso a sinistra, in basso a destra o in alto a destra.
## Aggiungere i controlli della mappa
Nel seguente esempio, aggiungerai i controlli della mappa elencati sopra.
### Esempio di codice di controllo della mappa
------
#### [ index.html ]
```
Map Controls
```
------
#### [ style.css ]
```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```
------
## Suggerimenti per gli sviluppatori
### Opzioni di controllo della navigazione
```
new maplibregl.NavigationControl({
showCompass: true, // show or hide compass (default: true)
showZoom: true // show or hide zoom controls (default: true)
});
```
### Opzioni di controllo geolocalizzate
```
new maplibregl.GeolocateControl({
positionOptions: { enableHighAccuracy: true }, // default: false
trackUserLocation: true // default: false
});
```
### Opzioni di controllo dell'attribuzione
```
new maplibregl.AttributionControl({
compact: true, // compact (collapsed) mode (default: false)
});
```
### Opzioni di controllo della scala
```
new maplibregl.ScaleControl({
maxWidth: 100, // width of the scale (default: 50)
unit: 'imperial' // imperial or metric (default: metric)
});
```
### Opzioni di controllo a schermo intero
```
map.addControl(new maplibregl.FullscreenControl({
container: document.querySelector('body') // container for fullscreen mode
}));
```