本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。
# 如何在地图上添加控件
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
}));
```