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

W tym artykule przedstawiono możliwości usługi Azure Maps w zakresie tworzenia mapy umożliwiającej użytkownikom interaktywne wyszukiwanie.This article demonstrates the capabilities of 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.
  • Uzyskiwanie klucza konta do użycia w demonstracyjnej aplikacji internetowej.Get your account key to use in the demo web application.

Jeśli nie masz subskrypcji platformy Azure, przed rozpoczęciem utwórz bezpłatne konto.If you don't have an Azure subscription, create a free account before you begin.

Logowanie się do witryny Azure PortalSign in to the Azure portal

Zaloguj się do Azure portal.Sign in to the Azure portal.

Tworzenie konta przy użyciu usługi Azure MapsCreate an account with Azure Maps

Utwórz nowe konto usługi Maps, wykonując następujące czynności:Create a new 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 portalu Marketplace wpisz Maps.In the Search the Marketplace box, type Maps.
  3. Z listy Wyniki wybierz pozycję Maps.From the Results, select 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 usługi Maps pobierz klucz, który umożliwia wysyłanie zapytań do interfejsów API usługi Maps.Once your Maps account is successfully created, retrieve the key that enables you to query the Maps APIs. Podczas wywoływania usług Azure Maps zalecamy użycie klucza podstawowego Twojego konta jako klucza subskrypcji.We recommend using your account's primary key as the subscription key when calling Azure Maps services.

  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.

Pobierz klucz podstawowy Azure Maps w Azure Portal

Pobieranie aplikacjiDownload the application

  1. Przejdź do interactiveSearch. html i kliknij go, aby wyświetlić zawartość w interfejsie użytkownika usługi GitHub.Go to interactiveSearch.html and click it to view the contents within the GitHub User Interface. Kliknij prawym przyciskiem myszy pierwotny przycisk i skopiuj zawartość pliku lub Zapisz jako, aby pobrać plik.Right click on the Raw button and copy the content of the file or 'Save as' to download 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.

Otwieranie aplikacjiOpen the 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

Oczyszczanie zasobówClean up resources

W tych samouczkach szczegółowo opisano sposób użycia i konfigurowania usługi Azure Maps dla konta.The tutorials 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 kontynuowania pracy, wykonaj następujące kroki, aby usunąć zasoby:If you don't plan to continue, 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. W menu po lewej stronie w witrynie Azure Portal wybierz pozycję Wszystkie zasoby.From the left menu in the Azure portal, select All resources. Następnie wybierz swoje konto usługi Azure Maps.Then select your Azure Maps account. W górnej części okienka Wszystkie zasoby wybierz pozycję Usuń.At the top of the All resources blade, select Delete.

Następne krokiNext steps

W tym przewodniku Szybki start utworzyliśmy konto usługi Azure Maps i utworzyliśmy aplikację demonstracyjną.In this quickstart, you created your Azure Maps account and created a demo app. 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 about Azure Maps:

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: