翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
# マップにコントロールを追加する方法
Amazon Location Service では、ナビゲーション、位置情報、全画面表示、スケール、属性など、複数のコントロールをマップに追加できます。
+ **ナビゲーションコントロール**: ズームボタンとコンパスが含まれています。
+ **Geolocate コントロール**: ブラウザの geolocation 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)
});
```
### Geolocate コントロールのオプション
```
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
}));
```