Szybki start: tworzenie interaktywnej mapy wyszukiwania za pomocą usługi Azure Mapy

W tym przewodniku Szybki start pokazano, jak za pomocą usługi Azure Mapy utworzyć mapę, która zapewnia użytkownikom interaktywne środowisko wyszukiwania. Przeprowadza on użytkownika przez następujące podstawowe kroki:

  • Tworzenie konta usługi Azure Maps.
  • Pobierz klucz subskrypcji usługi Azure Mapy do użycia w demonstracyjnej aplikacji internetowej.
  • Pobierz i otwórz aplikację mapy demonstracyjnej.

W tym przewodniku Szybki start jest używany zestaw Sdk sieci Web usługi Azure Mapy, jednak usługa Azure Mapy może być używana z dowolną kontrolką mapy, taką jak te popularne kontrolki mapy typu open source, dla których zespół usługi Azure Mapy utworzył wtyczkę.

Wymagania wstępne

Tworzenie konta usługi Azure Maps

Utwórz nowe konto usługi Azure Mapy, wykonując następujące czynności:

  1. Wybierz pozycję Utwórz zasób w lewym górnym rogu witryny Azure Portal.

  2. Wpisz azure Mapy w polu usługa wyszukiwania s i Marketplace.

  3. Wybierz pozycję Azure Mapy z wyświetlonej listy rozwijanej, a następnie wybierz przycisk Utwórz.

  4. Na stronie Tworzenie zasobu konta usługi Azure Mapy wprowadź następujące wartości, a następnie wybierz przycisk Utwórz:

    • Subskrypcja, która ma być używana dla tego konta.
    • Nazwa grupy zasobów dla tego konta. Możesz wybrać opcję Utwórz nową lub Wybierz istniejącą grupę zasobów.
    • Nazwa nowego konta usługi Azure Mapy.
    • Warstwa cenowa dla tego konta. Wybierz pozycję Gen2.
    • Przeczytaj oświadczenie o licencji i ochronie prywatności, a następnie zaznacz pole wyboru, aby zaakceptować warunki.

    Screenshot showing the Create an Azure Maps Account resource page in the Azure portal.

Pobieranie klucza subskrypcji dla konta

Po pomyślnym utworzeniu konta usługi Azure Mapy pobierz klucz subskrypcji, który umożliwia wykonywanie zapytań dotyczących interfejsów API Mapy.

  1. Otwórz konto usługi Maps w portalu.
  2. W sekcji ustawień wybierz pozycję Uwierzytelnianie.
  3. Skopiuj klucz podstawowy i zapisz go lokalnie, aby użyć go w dalszej części tego samouczka.

Screenshot showing your Azure Maps subscription key in the Azure portal.

Uwaga

W tym przewodniku Szybki start użyto metody uwierzytelniania klucza współużytkowanego do celów demonstracyjnych, ale preferowaną metodą dla dowolnego środowiska produkcyjnego jest użycie uwierzytelniania [Microsoft Entra ID].

Pobieranie i aktualizowanie pokazu usługi Azure Mapy

  1. Skopiuj zawartość pliku: Interactive Search Quickstart.html.
  2. Zapisz lokalnie zawartość tego pliku jako AzureMapDemo.html. Otwórz ten plik w edytorze tekstów.
  3. Dodaj wartość Klucz podstawowy uzyskaną w poprzedniej sekcji
    1. Oznacz jako komentarz cały kod w authOptions funkcji . Ten kod jest używany do uwierzytelniania w usłudze Microsoft Entra.
    2. Usuń komentarz z dwóch ostatnich wierszy w funkcji. Ten kod jest używany do uwierzytelniania klucza współużytkowanego, czyli podejścia używanego w tym przewodniku authOptions Szybki start.
    3. Zastąp <Your Azure Maps Key> ciąg wartością klucza subskrypcji z poprzedniej sekcji.

Otwieranie aplikacji demonstracyjnej

  1. Otwórz plik AzureMapDemo.html w wybranej przeglądarce.

  2. Spójrz na mapę miasta Los Angeles. Powiększ i pomniejsz, aby zobaczyć, jak mapa jest automatycznie renderowana z większą lub mniejszą ilością informacji w zależności od poziomu powiększenia.

  3. Zmień domyślny środek mapy. W pliku AzureMapDemo.html wyszukaj zmienną o nazwie center. Zastąp parę wartości długości i szerokości geograficznej tej zmiennej nowymi wartościami [-74.0060, 40.7128]. Zapisz plik i odśwież przeglądarkę.

  4. Wypróbuj funkcję wyszukiwania interaktywnego. W polu wyszukiwania w lewym górnym rogu demonstracyjnej aplikacji internetowej wyszukaj restauracje.

  5. Przesuń wskaźnik myszy na liście adresów i lokalizacji, które są wyświetlane pod polem wyszukiwania. Zwróć uwagę, jak za pomocą odpowiedniej pinezki na mapie wyświetlane są informacje o tej lokalizacji. Ze względu na ochronę danych prywatnych firm wyświetlono fikcyjne nazwy i adresy.

    Screenshot showing the interactive map search web application.

Czyszczenie zasobów

Ważne

W samouczkach wymienionych w sekcji Następne kroki szczegółowo opisano sposób używania i konfigurowania usługi Azure Mapy przy użyciu konta. Jeśli planujesz kontynuować pracę z samouczkami, nie usuwaj zasobów utworzonych w tym przewodniku Szybki start.

Jeśli nie planujesz kontynuować pracy z samouczkami, wykonaj następujące kroki, aby wyczyścić zasoby:

  1. Zamknij przeglądarkę z uruchomioną aplikacją internetową AzureMapDemo.html.
  2. Przejdź do witryny Azure Portal. Wybierz pozycję Wszystkie zasoby na stronie portalu głównego lub wybierz ikonę menu w lewym górnym rogu, a następnie pozycję Wszystkie zasoby.
  3. Wybierz konto usługi Azure Mapy, a następnie wybierz pozycję Usuń w górnej części strony.

Aby uzyskać więcej przykładów kodu i interaktywnego środowiska kodowania, zobacz następujące artykuły:

Następne kroki

W tym przewodniku Szybki start utworzono konto usługi Azure Mapy i aplikację demonstracyjną. Zapoznaj się z następującymi samouczkami, aby dowiedzieć się więcej o usłudze Azure Mapy: