기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.
# 맵에 컨트롤을 추가하는 방법
Amazon Location Service를 사용하면 탐색, 지리적 위치, 전체 화면, 규모 조정 및 속성 컨트롤을 포함한 여러 컨트롤을 맵에 추가할 수 있습니다.
+ **탐색 컨트롤**: 확대/축소 버튼과 나침반이 포함되어 있습니다.
+ **지리적 위치 컨트롤**: 브라우저의 지리적 위치 API를 사용하여 맵에서 사용자를 찾는 버튼을 제공합니다.
+ **전체 화면 컨트롤**: 맵을 전체 화면 모드로 전환하거나 해제하는 버튼이 포함되어 있습니다.
+ **규모 조정 컨트롤**: 맵상의 거리와 지면상의 해당 거리의 비율을 표시합니다.
+ **속성 컨트롤**: 맵의 속성 정보를 제공합니다. 기본적으로 속성 컨트롤은 확장됩니다(맵 너비에 관계없음).
왼쪽 상단, 왼쪽 하단, 오른쪽 하단 또는 오른쪽 상단 등 맵의 모든 모서리에 컨트롤을 추가할 수 있습니다.
## 맵 컨트롤 추가
다음 예제에서는 위에 나열된 맵 컨트롤을 추가합니다.
### 맵 컨트롤 코드 예제
------
#### [ index.html ]
```
Map Controls
```
------
#### [ style.css ]
```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```
------
## 개발자 팁
### 탐색 컨트롤 옵션
```
new maplibregl.NavigationControl({
showCompass: true, // show or hide compass (default: true)
showZoom: true // show or hide zoom controls (default: true)
});
```
### 지리적 위치 컨트롤 옵션
```
new maplibregl.GeolocateControl({
positionOptions: { enableHighAccuracy: true }, // default: false
trackUserLocation: true // default: false
});
```
### 속성 컨트롤 옵션
```
new maplibregl.AttributionControl({
compact: true, // compact (collapsed) mode (default: false)
});
```
### 규모 조정 컨트롤 옵션
```
new maplibregl.ScaleControl({
maxWidth: 100, // width of the scale (default: 50)
unit: 'imperial' // imperial or metric (default: metric)
});
```
### 전체 화면 컨트롤 옵션
```
map.addControl(new maplibregl.FullscreenControl({
container: document.querySelector('body') // container for fullscreen mode
}));
```