기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

# Amazon Location MapLibre 지오코더 GL 플러그인 사용
<a name="dev-maplibre-geocoder"></a>

Amazon Location MapLibre 지오코더 플러그인은 [maplibre-gl-geocoder](https://github.com/maplibre/maplibre-gl-geocoder) 라이브러리를 사용하여 맵 렌더링 및 지오코딩 작업을 수행할 때 Amazon Location 기능을 JavaScript 애플리케이션에 더 쉽게 통합할 수 있도록 설계되었습니다.

## 설치
<a name="geocoder-installation"></a>

모듈에서 사용할 수 있도록 NPM에서 Amazon Location MapLibre 지오코더 플러그인을 설치합니다. 다음 명령을 입력합니다.

```
npm install @aws/amazon-location-for-maplibre-gl-geocoder
```

스크립트를 사용하여 브라우저에서 직접 사용할 HTML 및 CSS 파일을 가져올 수 있습니다.

```
<script src="https://cdn.jsdelivr.net/npm/@aws/amazon-location-for-maplibre-gl-geocoder@2"></script>
<link
  href="https://cdn.jsdelivr.net/npm/@aws/amazon-location-for-maplibre-gl-geocoder@2/dist/amazon-location-for-mlg-styles.css"
  rel="stylesheet"
/>
```

## 모듈에서 사용 - 독립형 GeoPlaces SDK
<a name="geocoder-module"></a>

이 예제에서는 [AWS SDK for JavaScript V3](https://github.com/aws/aws-sdk-js-v3)를 사용하여 라이브러리에 제공할 GeoPlacesClient와 GeoPlacesClient를 인증하기 위한 [AuthHelper](https://github.com/aws-geospatial/amazon-location-utilities-auth-helper-js)를 가져옵니다. 지오코더에 대한 모든 API를 활성화합니다.

```
// Import MapLibre GL JS
import maplibregl from "maplibre-gl";
// Import from the AWS JavaScript SDK V3
import { GeoPlacesClient } from "@aws-sdk/client-geo-places";
// Import the utility functions
import { withAPIKey } from "@aws/amazon-location-utilities-auth-helper";
// Import the AmazonLocationMaplibreGeocoder
import {
  buildAmazonLocationMaplibreGeocoder,
  AmazonLocationMaplibreGeocoder,
} from "@aws/amazon-location-for-maplibre-gl-geocoder";

const apiKey = "<API Key>";
const mapName = "Standard";
const region = "<Region>"; // region containing Amazon Location API Key

// Create an authentication helper instance using an API key and region
const authHelper = await withAPIKey(apiKey, region);

const client = new GeoPlacesClient(authHelper.getClientConfig());

// Render the map
const map = new maplibregl.Map({
  container: "map",
  center: [-123.115898, 49.295868],
  zoom: 10,
  style: `https://maps.geo.${region}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`,
});

// Gets an instance of the AmazonLocationMaplibreGeocoder Object.
const amazonLocationMaplibreGeocoder = buildAmazonLocationMaplibreGeocoder(client, { enableAll: true });

// Now we can add the Geocoder to the map.
map.addControl(amazonLocationMaplibreGeocoder.getPlacesGeocoder());
```

## 브라우저에서 사용 - 독립형 GeoPlaces SDK
<a name="geocoder-browser"></a>

이 예제에서는 Amazon Location 클라이언트를 사용하여 API 키를 통해 인증되는 요청을 작성합니다.

**참고**  
이러한 예제 중 일부는 Amazon Location GeoPlacesClient를 사용합니다. 이 클라이언트는 [AWS SDK for JavaScript V3](https://github.com/aws/aws-sdk-js-v3)를 기반으로 하며 HTML 파일에 참조된 스크립트를 통해 Amazon Location에 직접적으로 호출할 수 있습니다.

HTML 파일에 다음을 포함합니다.

```
<!-- Import the Amazon Location For Maplibre Geocoder -->
<script src="https://cdn.jsdelivr.net/npm/@aws/amazon-location-for-maplibre-gl-geocoder@2"></script>
<link
  href="https://cdn.jsdelivr.net/npm/@aws/amazon-location-for-maplibre-gl-geocoder@2/dist/amazon-location-for-mlg-styles.css"
  rel="stylesheet"
/>
<!-- Import the Amazon GeoPlacesClient -->
<script src="https://cdn.jsdelivr.net/npm/@aws/amazon-location-client@1"></script>
```

JavaScript 파일에 다음을 포함합니다.

```
const apiKey = "<API Key>";
const mapStyle = "Standard";
const region = "<Region>"; // region containing Amazon Location API key

// Create an authentication helper instance using an API key and region
const authHelper = await amazonLocationClient.withAPIKey(apiKey, region);

const client = new amazonLocationClient.GeoPlacesClient(authHelper.getClientConfig());

// Render the map
const map = new maplibregl.Map({
  container: "map",
  center: [-123.115898, 49.295868],
  zoom: 10,
  style: `https://maps.geo.${region}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`,
});

// Initialize the AmazonLocationMaplibreGeocoder object
const amazonLocationMaplibreGeocoderObject = amazonLocationMaplibreGeocoder.buildAmazonLocationMaplibreGeocoder(
  client,
  { enableAll: true },
);

// Use the AmazonLocationWithMaplibreGeocoder object to add a geocoder to the map.
map.addControl(amazonLocationMaplibreGeocoderObject.getPlacesGeocoder());
```

## 함수
<a name="geocoder-functions"></a>

다음은 Amazon Location MapLibre 지오코더 플러그인에 사용되는 함수입니다.
+ `buildAmazonLocationMaplibreGeocoder`

  이 클래스는 다른 모든 직접 호출의 진입점인 `AmazonLocationMaplibreGeocder`의 인스턴스를 생성합니다.

  독립형 `GeoPlacesClient` API 호출 사용(클라이언트는 `GeoPlacesClient`의 인스턴스임):

  ```
  const amazonLocationMaplibreGeocoder = buildAmazonLocationMaplibreGeocoder(client, { enableAll: true });
  ```

  통합 `LocationClient` API 호출 사용(클라이언트는 `LocationClient`의 인스턴스임):

  ```
  const amazonLocationMaplibreGeocoder = buildAmazonLocationMaplibreGeocoder(client, {
    enableAll: true,
    placesIndex: placeIndex,
  });
  ```
+ `getPlacesGeocoder`

  맵에 직접 추가할 수 있는 즉시 사용 가능한 IControl 객체를 반환합니다.

  ```
  const geocoder = getPlacesGeocoder();
  
  // Initialize map see: <insert link to initializing a map instance here>
  let map = await initializeMap();
  
  // Add the geocoder to the map.
  map.addControl(geocoder);
  ```