Szybki Start: Tworzenie mapy wyszukiwania interaktywnego za pomocą Azure MapsQuickstart: Create an interactive search map with Azure Maps

W tym artykule pokazano, jak za pomocą Azure Maps utworzyć mapę zapewniającą użytkownikom interaktywną obsługę wyszukiwania.This article shows you how to use Azure Maps to create a map that gives users an interactive search experience. Przeprowadza on użytkownika przez następujące podstawowe kroki:It walks you through these basic steps:

  • Tworzenie konta usługi Azure Maps.Create your own Azure Maps account.
  • Pobierz klucz podstawowy do użycia w demonstracyjnej aplikacji sieci Web.Get your primary key to use in the demo web application.
  • Pobierz i Otwórz aplikację Mapy demonstracyjnej.Download and open the demo map application.

Wymagania wstępnePrerequisites

Tworzenie konta usługi Azure MapsCreate an Azure Maps account

Utwórz nowe konto Azure Maps, wykonując następujące czynności:Create a new Azure Maps account with the following steps:

  1. W lewym górnym rogu witryny Azure Portal kliknij przycisk Utwórz zasób .In the upper left-hand corner of the Azure portal, click Create a resource .

  2. W polu Wyszukaj w witrynie Marketplace wpisz Azure Maps .In the Search the Marketplace box, type Azure Maps .

  3. Z wyników wybierz pozycję Azure Maps .From the Results , select Azure Maps . Kliknij przycisk Utwórz znajdujący się poniżej mapy.Click Create button that appears below the map.

  4. Na stronie Tworzenie konta usługi Maps wprowadź następujące wartości:On the Create Maps Account page, enter the following values:

    • Subskrypcja , która ma być używana dla tego konta.The Subscription that you want to use for this account.
    • Nazwa grupy zasobów dla tego konta.The Resource group name for this account. Można wybrać pozycję Utwórz nowe lub Użyj istniejącego dla grupy zasobów.You may choose to Create new or Use existing resource group.
    • Nazwa nowego konta.The Name of your new account.
    • Warstwa cenowa dla tego konta.The Pricing tier for this account.
    • Zapoznaj się z Licencją oraz Zasadami zachowania poufności informacji i zaznacz pole wyboru, aby zaakceptować warunki.Read the License and Privacy Statement , and check the checkbox to accept the terms.
    • Kliknij przycisk Utwórz .Click the Create button.

    Tworzenie konta usługi Maps w portalu

Pobieranie klucza podstawowego kontaGet the primary key for your account

Po pomyślnym utworzeniu konta Maps Pobierz klucz podstawowy, który umożliwia wykonywanie zapytań dotyczących interfejsów API map.Once your Maps account is successfully created, retrieve the primary key that enables you to query the Maps APIs.

  1. Otwórz konto usługi Maps w portalu.Open your Maps account in the portal.
  2. W sekcji Ustawienia wybierz pozycję uwierzytelnianie .In the settings section, select Authentication .
  3. Skopiuj klucz podstawowy do schowka.Copy the Primary Key to your clipboard. Zapisz go lokalnie — będzie używany w dalszej części tego samouczka.Save it locally to use later in this tutorial.

Uwaga

Jeśli używasz klucza subskrypcji zamiast klucza podstawowego, mapa nie będzie renderowana prawidłowo.If you use the subscription key instead of the primary key, your map won't render properly. Ponadto ze względów bezpieczeństwa zaleca się obracanie między kluczami podstawowymi i pomocniczymi.Also, for security purposes, it is recommended that you rotate between your primary and secondary keys. Aby obrócić klucze, zaktualizuj aplikację tak, aby korzystała z klucza pomocniczego, wdróż, a następnie naciśnij przycisk Cykl/Odśwież obok klucza podstawowego, aby wygenerować nowy klucz podstawowy.To rotate keys, update your app to use the secondary key, deploy, then press the cycle/refresh button beside the primary key to generate a new primary key. Stary klucz podstawowy zostanie wyłączony.The old primary key will be disabled. Aby uzyskać więcej informacji na temat rotacji kluczy, zobacz konfigurowanie Azure Key Vault przy użyciu rotacji kluczy i inspekcjiFor more information on key rotation, see Set up Azure Key Vault with key rotation and auditing

Pobierz klucz podstawowy Azure Maps w Azure Portal

Pobieranie aplikacji demonstracyjnejDownload the demo application

  1. Przejdź do interactiveSearch.html.Go to interactiveSearch.html. Skopiuj zawartość pliku.Copy the content of the file.
  2. Zapisz lokalnie zawartość tego pliku jako AzureMapDemo.html .Save the contents of this file locally as AzureMapDemo.html . Otwórz ten plik w edytorze tekstów.Open it in a text editor.
  3. Wyszukaj ciąg <Your Azure Maps Key>.Search for the string <Your Azure Maps Key>. Zastąp go wartością pola Klucz podstawowy z poprzedniej sekcji.Replace it with the Primary Key value from the preceding section.

Otwórz aplikację demonstracyjnąOpen the demo application

  1. Otwórz plik AzureMapDemo.html w wybranej przeglądarce.Open the file AzureMapDemo.html in a browser of your choice.

  2. Spójrz na mapę miasta Los Angeles.Observe the map shown of the City of 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.Zoom in and out to see how the map automatically renders with more or less information depending on the zoom level.

  3. Zmień domyślny środek mapy.Change the default center of the map. W pliku AzureMapDemo.html wyszukaj zmienną o nazwie center .In the AzureMapDemo.html file, search for the variable named center . Zastąp parę wartości długości i szerokości geograficznej tej zmiennej nowymi wartościami [-74.0060, 40.7128] .Replace the longitude, latitude pair value for this variable with the new values [-74.0060, 40.7128] . Zapisz plik i odśwież przeglądarkę.Save the file and refresh your browser.

  4. Wypróbuj funkcję wyszukiwania interaktywnego.Try out the interactive search experience. W polu wyszukiwania w lewym górnym rogu demonstracyjnej aplikacji internetowej wyszukaj restauracje .In the search box on the upper-left corner of the demo web application, search for restaurants .

  5. Przesuń wskaźnik myszy na liście adresów i lokalizacji, które są wyświetlane pod polem wyszukiwania.Move your mouse over the list of addresses and locations that appear below the search box. Zwróć uwagę, jak za pomocą odpowiedniej pinezki na mapie wyświetlane są informacje o tej lokalizacji.Notice how the corresponding pin on the map pops out information about that location. Ze względu na ochronę danych prywatnych firm wyświetlono fikcyjne nazwy i adresy.For privacy of private businesses, fictitious names and addresses are shown.

    Aplikacja sieci Web do wyszukiwania map interakcyjnych

Czyszczenie zasobówClean up resources

Ostrzeżenie

W samouczkach wymienionych w sekcji następne kroki szczegółowo opisano sposób używania i konfigurowania Azure Maps przy użyciu konta.The tutorials listed in the Next Steps section detail how to use and configure Azure Maps with your account. Jeśli planujesz kontynuować pracę z samouczkami, nie usuwaj zasobów utworzonych w tym przewodniku Szybki start.Don't clean up the resources created in this quickstart if you plan to continue to the tutorials.

Jeśli nie planujesz kontynuować korzystania z samouczków, wykonaj następujące kroki, aby wyczyścić zasoby:If you don't plan to continue to the tutorials, take these steps to clean up the resources:

  1. Zamknij przeglądarkę z uruchomioną aplikacją internetową AzureMapDemo.html .Close the browser that runs the AzureMapDemo.html web application.
  2. Przejdź do strony Azure Portal.Navigate to the Azure portal page. Wybierz pozycję wszystkie zasoby na stronie portalu głównego.Select All resources from the main portal page. Lub kliknij ikonę menu w lewym górnym rogu.Or, click on the menu icon in the upper left-hand corner. Wybierz pozycję Wszystkie zasoby .Select All resources .
  3. Kliknij konto Azure Maps.Click on your Azure Maps account. W górnej części strony kliknij pozycję Usuń .At the top of the page, click Delete .

Aby uzyskać dodatkowe przykłady kodu i zapoznać się z interaktywnym środowiskiem kodowania, przejrzyj następujące przewodniki:For more code examples and an interactive coding experience, see these guides:

Znajdź adres za pomocą usługi Azure Maps SearchFind an address with Azure Maps search service

Użyj kontrolka mapy Azure MapsUse the Azure Maps Map Control

Następne krokiNext steps

W tym przewodniku szybki start utworzono konto Azure Maps i utworzono aplikację demonstracyjną.In this quickstart, you created your Azure Maps account and created a demo application. Zapoznaj się z następującymi samouczkami, aby dowiedzieć się więcej na temat Azure Maps:Take a look at the following tutorials to learn more about Azure Maps: