빠른 시작: Azure Maps를 사용하여 대화형 검색 맵 만들기

이 빠른 시작에서는 Azure Maps를 사용하여 사용자에게 대화형 검색 환경을 제공하는 맵을 만드는 방법을 보여 줍니다. 여기서는 다음 기본 단계를 단계별로 안내합니다.

이 빠른 시작에서는 Azure Maps Web SDK를 사용하지만 Azure Maps 서비스는 Azure Maps 팀에서 플러그 인을 만들 때 사용하는 인기 있는 오픈 소스 맵 컨트롤과 같은 모든 맵 컨트롤에서 사용할 수 있습니다.

필수 조건

다음 단계에 따라 새 Azure Maps 계정을 만듭니다.

Azure Maps 계정이 성공적으로 만들어지면 Maps API를 쿼리할 수 있는 구독 키를 검색합니다.

참고 항목

이 빠른 시작에서는 데모용 공유 키 인증 방법을 사용하지만, 프로덕션 환경에 사용되는 기본 방법은 [Microsoft Entra ID] 인증입니다.

Interactive Search Quickstart.html 파일의 내용을 복사합니다.
이 파일의 콘텐츠를 AzureMapDemo.html에 로컬로 저장합니다. 텍스트 편집기에서 엽니다.
이전 섹션에서 가져온 기본 키 값을 추가합니다.
1. authOptions 함수의 모든 코드를 주석으로 처리합니다. 이 코드는 Microsoft Entra 인증에 사용됩니다.
2. authOptions 함수에서 마지막 두 줄의 주석 처리를 제거합니다. 이 코드는 이 빠른 시작에서 사용되는 방식인 공유 키 인증에 사용됩니다.
3. <Your Azure Maps Key>를 이전 섹션의 구독 키 값으로 바꿉니다.

원하는 브라우저에서 AzureMapDemo.html 파일을 엽니다.
로스앤젤레스 시의 지도를 관찰합니다. 확대 및 축소하여 확대/축소 수준에 따라 지도가 더 많거나 더 적은 정보로 자동으로 렌더링되도록 하는 방법을 확인합니다.
지도의 기본 센터를 변경합니다. AzureMapDemo.html 파일에서 center라는 변수를 검색합니다. 이 변수에 대한 위도, 경도 쌍 값을 새 값인 [-74.0060, 40.7128]로 바꿉니다. 파일을 저장하고 브라우저를 새로 고칩니다.
대화형 검색 환경을 사용해 봅니다. 웹 애플리케이션 데모의 왼쪽 위 모서리에 있는 검색 상자에서 식당을 검색합니다.
검색 상자 아래에 표시되는 주소와 위치의 목록 위로 마우스를 이동합니다. 지도의 해당 핀이 해당 위치에 대한 정보를 팝업하는 상태를 확인합니다. 프라이빗 비즈니스의 정보 보호를 위해 가상의 이름과 주소가 표시됩니다.

Important

다음 단계 섹션에 나열된 이 자습서에서는 계정에서 Azure Maps를 사용하고 구성하는 방법에 대해 자세히 설명되어 있습니다. 자습서를 계속 진행하려면 이 빠른 시작에서 만든 리소스를 정리하지 마세요.

자습서를 계속 진행하지 않으려면 다음 단계에 따라 리소스를 정리합니다.

AzureMapDemo.html 웹 애플리케이션을 실행하는 브라우저를 닫습니다.
Azure Portal로 이동합니다. 주 포털 페이지에서 모든 리소스를 선택하거나 왼쪽 위 모서리에 있는 메뉴 아이콘을 선택한 다음 모든 리소스를 선택합니다.
Azure Maps 계정을 선택한 다음, 페이지 맨 위에서 삭제를 선택합니다.

더 많은 코드 예제 및 대화형 코딩 환경은 다음 문서를 참조하세요.

이 빠른 시작에서는 Azure Maps 계정을 만들고 데모 애플리케이션을 만들었습니다. Azure Maps에 대해 자세히 알아보려면 다음 자습서를 살펴보세요.