Azure Maps JavaScript/TypeScript REST SDK(JavaScript SDK)는 Azure Maps Search 서비스를 사용한 검색(예: 주소 검색, 도시 또는 국가 경계 검색, 좌표 검색)을 지원합니다. 이 문서는 Azure Maps의 기능을 통합하는 위치 인식 애플리케이션 빌드를 시작하는 데 도움이 됩니다.
참고
Azure Maps JavaScript SDK는 Node.js의 LTS 버전을 지원합니다. 자세한 내용은 Node.js 릴리스 작업 그룹을 참조하세요.
Azure Maps 검색 API에 액세스하는 데 사용되는 MapsSearchClient 개체를 만들 때 인증을 위해 credential 개체가 필요합니다. Microsoft Entra 자격 증명 또는 Azure 구독 키를 사용하여 인증할 수 있습니다. 자세한 내용은 Azure Maps로 인증을 참조하세요.
팁
MapsSearchClient는 Azure Maps 검색 라이브러리를 사용하는 개발자를 위한 기본 인터페이스입니다. 사용 가능한 검색 방법에 대한 자세한 내용은 Azure Maps Search 클라이언트 라이브러리를 참조하세요.
새 Microsoft Entra 애플리케이션을 등록하고 필요한 역할을 서비스 주체에 할당하여 Azure Maps에 대한 액세스 권한을 부여해야 합니다. 자세한 내용은 비 Azure 리소스의 디먼 호스트를 참조하세요. 애플리케이션(클라이언트) ID, 디렉터리(테넌트) ID 및 클라이언트 암호가 반환됩니다. 이 값을 복사하여 안전한 장소에 저장합니다. 다음 단계에서 필요합니다.
Microsoft Entra 애플리케이션의 애플리케이션(클라이언트) ID, 디렉터리(테넌트) ID, 클라이언트 암호 값과 맵 리소스의 클라이언트 ID를 환경 변수로 설정합니다.
환경 변수
설명
AZURE_CLIENT_ID
등록된 애플리케이션의 애플리케이션(클라이언트) ID
AZURE_CLIENT_SECRET
등록된 애플리케이션의 클라이언트 암호 값
AZURE_TENANT_ID
등록된 애플리케이션의 디렉터리(테넌트) ID
MAPS_CLIENT_ID
Azure Maps 계정의 클라이언트 ID
이러한 변수에 대해 .env 파일을 사용할 수 있습니다.
dotenv 패키지를 설치해야 합니다.
const MapsSearch = require("@azure-rest/maps-search").default;
const { AzureSASCredential } = require("@azure/core-auth");
const { DefaultAzureCredential } = require("@azure/identity");
const { AzureMapsManagementClient } = require("@azure/arm-maps");
const subscriptionId = "<subscription ID of the map account>"
const resourceGroupName = "<resource group name of the map account>";
const accountName = "<name of the map account>";
const mapsAccountSasParameters = {
start: "<start time in ISO format>", // e.g. "2023-11-24T03:51:53.161Z"
expiry: "<expiry time in ISO format>", // maximum value to start + 1 day
maxRatePerSecond: 500,
principalId: "<principle ID (object ID) of the managed identity>",
signingKey: "primaryKey",
};
const credential = new DefaultAzureCredential();
const managementClient = new AzureMapsManagementClient(credential, subscriptionId);
const {accountSasToken} = await managementClient.accounts.listSas(
resourceGroupName,
accountName,
mapsAccountSasParameters
);
if (accountSasToken === undefined) {
throw new Error("No accountSasToken was found for the Maps Account.");
}
const sasCredential = new AzureSASCredential(accountSasToken);
const client = MapsSearch(sasCredential);
지오코딩
다음 코드 조각은 간단한 콘솔 애플리케이션에서 @azure-rest/maps-search 패키지를 가져오고, GetGeocoding 쿼리를 사용하여 주소의 좌표를 가져오는 방법을 보여 줍니다.
이 코드 조각은 Azure Maps Search 클라이언트 라이브러리의 MapsSearch 메서드를 사용하여 Azure 자격 증명으로 client 개체를 만드는 방법을 보여 주는 코드 조각입니다. Azure Maps 구독 키 또는 Microsoft Entra 자격 증명을 사용할 수 있습니다.
path 매개 변수는 API 엔드포인트(이 경우 "/geocode")를 지정합니다.
get 메서드는 쿼리 매개 변수를 사용하여 HTTP GET 요청을 보냅니다. 쿼리는 "1301 Alaskan Way, Seattle, WA 98101, US"의 좌표를 검색합니다. SDK는 결과를 GeocodingResponseOutput 개체로 반환하고 콘솔에 씁니다. 이 예에서 결과는 신뢰도 점수에 따라 정렬되며 첫 번째 결과만 화면에 표시됩니다. 자세한 내용은 GetGeocoding을 참조하세요.
Node.js로 search.js 실행:
node search.js
일괄 처리 역방향 지오코딩
Azure Maps Search는 일부 일괄 처리 쿼리 방법도 제공합니다. 다음 예제에서는 일괄 처리 역방향 검색 방법을 호출하는 방법을 보여 줍니다.
Azure Maps와 상호 작용하는 코드 작성에 대해 알아봅니다. JavaScript 및 Visual Studio Code를 사용하여 트럭, 승용차 또는 자전거의 최적 경로를 찾을 수 있는 재미있는 앱을 개발하고 테스트합니다. 경로는 미국의 서부 해안에서 동부 해안까지입니다. 차량에 따라 경로가 어떻게 바뀌는지 확인할 수 있습니다. 트럭의 경우 화물이 유해 물질이면 경로가 어떻게 달라지는지 보게 됩니다. 사용자가 직접 위치를 추가할 기회가 주어집니다.