Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.
# Cara menambahkan kontrol pada peta
Amazon Location Service memungkinkan Anda menambahkan beberapa kontrol ke peta, termasuk kontrol navigasi, geolokasi, layar penuh, skala, dan atribusi.
+ **Kontrol navigasi**: Berisi tombol zoom dan kompas.
+ **Kontrol geolocate**: Menyediakan tombol yang menggunakan API geolokasi browser untuk menemukan pengguna di peta.
+ **Kontrol layar penuh**: Berisi tombol untuk mengaktifkan peta masuk dan keluar dari mode layar penuh.
+ **Kontrol skala**: Menampilkan rasio jarak pada peta dengan jarak yang sesuai di tanah.
+ **Kontrol atribusi**: Menyajikan informasi atribusi peta. Secara default, kontrol atribusi diperluas (terlepas dari lebar peta).
Anda dapat menambahkan kontrol ke setiap sudut peta: kiri atas, kiri bawah, kanan bawah, atau kanan atas.
## Menambahkan kontrol peta
Dalam contoh berikut, Anda akan menambahkan kontrol peta yang tercantum di atas.
### Contoh kode kontrol peta
------
#### [ index.html ]
```
Map Controls
```
------
#### [ style.css ]
```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```
------
## Kiat pengembang
### Opsi kontrol navigasi
```
new maplibregl.NavigationControl({
showCompass: true, // show or hide compass (default: true)
showZoom: true // show or hide zoom controls (default: true)
});
```
### Opsi kontrol geolokasi
```
new maplibregl.GeolocateControl({
positionOptions: { enableHighAccuracy: true }, // default: false
trackUserLocation: true // default: false
});
```
### Opsi kontrol atribusi
```
new maplibregl.AttributionControl({
compact: true, // compact (collapsed) mode (default: false)
});
```
### Opsi kontrol skala
```
new maplibregl.ScaleControl({
maxWidth: 100, // width of the scale (default: 50)
unit: 'imperial' // imperial or metric (default: metric)
});
```
### Opsi kontrol layar penuh
```
map.addControl(new maplibregl.FullscreenControl({
container: document.querySelector('body') // container for fullscreen mode
}));
```