Creare una mappa per la ricerca interattiva con Mappe di AzureCreate an interactive search map by using Azure Maps

Questo articolo illustra le funzionalità di Mappe di Azure che consentono di creare una mappa che offre agli utenti un'esperienza di ricerca interattiva.This article demonstrates the capabilities of Azure Maps to create a map that gives users an interactive search experience. L'articolo descrive le operazioni di base seguenti:It walks you through these basic steps:

  • Creare un proprio account di Mappe di Azure.Create your own Azure Maps account.
  • Ottenere la chiave dell'account da usare nell'applicazione Web demo.Get your account key to use in the demo web application.

Se non si ha una sottoscrizione di Azure, creare un account gratuito prima di iniziare.If you don't have an Azure subscription, create a free account before you begin.

Accedere al portale di AzureSign in to the Azure portal

Accedere al portale di Azure.Sign in to the Azure portal.

Creare un account e ottenere la chiaveCreate an account and get your key

  1. Nell'angolo in alto a sinistra del portale di Azure selezionare Crea una risorsa.In the upper-left corner of the Azure portal, select Create a resource.

  2. Nella casella Cerca nel Marketplace immettere Mappe.In the Search the Marketplace box, enter Maps.

  3. Fra i risultati selezionare Mappe.From the Results, select Maps. Selezionare il pulsante Crea visualizzato sotto la mappa.Select the Create button that appears below the map.

  4. Nella pagina Crea account di Mappe di Azure immettere i valori seguenti:On the Create Azure Maps Account page, enter the following values:

    • Il nome del nuovo account.The Name of your new account.

    • La sottoscrizione da usare per l'account.The Subscription that you want to use for this account.

    • Il gruppo di risorse per l'account.The Resource group for this account. Per il gruppo di risorse è possibile selezionare l'opzione Crea nuovo o Usa esistente.You might choose to Create new or Use existing resource group.

    • Selezionare il piano tariffario scelto.Select the Pricing Tier of your choice.

    • Leggere la Licenza e l'Informativa sulla privacy.Read the License and Privacy Statement. Selezionare la casella di controllo per accettare le condizioni.Select the check box to accept the terms.

    • Infine, selezionare il pulsante Crea.Finally, select the Create button.

      Creare un account di Mappe di Azure nel portale

  5. Dopo avere creato l'account, aprirlo e trovare la sezione delle impostazioni del menu dell'account.After your account is successfully created, open it and find the settings section of the account menu. Selezionare Chiavi per visualizzare le chiavi primaria e secondaria per l'account di Mappe di Azure.Select Keys to view the primary and secondary keys for your Azure Maps account. Copiare il valore di Chiave primaria negli Appunti in locale per usarlo nella sezione seguente.Copy the Primary Key value to your local clipboard to use in the following section.

Scaricare l'applicazioneDownload the application

  1. Scaricare o copiare il contenuto del file interactiveSearch.html.Download or copy the contents of the file interactiveSearch.html.
  2. Salvare il contenuto del file in locale come AzureMapDemo.html.Save the contents of this file locally as AzureMapDemo.html. Aprirlo in un editor di testo.Open it in a text editor.
  3. Cercare la stringa <Your Azure Maps Key>.Search for the string <Your Azure Maps Key>. Sostituirla con il valore di Chiave primaria ottenuto nella sezione precedente.Replace it with the Primary Key value from the preceding section.

Aprire l'applicazioneOpen the application

  1. Aprire il file AzureMapDemo.html nel browser che si preferisce.Open the file AzureMapDemo.html in a browser of your choice.

  2. Osservare la mappa visualizzata della città di Los Angeles.Observe the map shown of the City of Los Angeles. Fare zoom avanti e indietro per osservare come la mappa esegue automaticamente il rendering con più o meno informazioni a seconda del livello di zoom.Zoom in and out to see how the map automatically renders with more or less information depending on the zoom level.

  3. Modificare il centro predefinito della mappa.Change the default center of the map. Nel file AzureMapDemo.html cercare la variabile denominata center.In the AzureMapDemo.html file, search for the variable named center. Sostituire il valore della coppia longitudine, latitudine di questa variabile con i nuovi valori [-74,0060, 40,7128].Replace the longitude, latitude pair value for this variable with the new values [-74.0060, 40.7128]. Salvare il file e aggiornare il browser.Save the file and refresh your browser.

  4. Provare l'esperienza di ricerca interattiva.Try out the interactive search experience. Nella casella di ricerca nell'angolo in alto a sinistra dell'applicazione Web demo cercare restaurants.In the search box on the upper-left corner of the demo web application, search for restaurants.

  5. Spostare il puntatore del mouse sull'elenco di indirizzi e posizioni visualizzato sotto la casella di ricerca.Move your mouse over the list of addresses and locations that appear below the search box. Osservare che l'indicatore corrispondente sulla mappa visualizza le informazioni sulla posizione corrispondente.Notice how the corresponding pin on the map pops out information about that location. Per la privacy delle aziende private, sono visualizzati nomi e indirizzi fittizi.For privacy of private businesses, fictitious names and addresses are shown.

    Applicazione Web di ricerca interattiva

Pulire le risorseClean up resources

Le esercitazioni analizzano in dettaglio come usare e configurare Mappe di Azure con l'account.The tutorials detail how to use and configure Azure Maps with your account. Non eliminare le risorse create in questa guida introduttiva se si prevede di continuare con le esercitazioni.Don't clean up the resources created in this quickstart if you plan to continue to the tutorials. Se non si intende continuare, eseguire questi passaggi per pulire le risorse:If you don't plan to continue, take these steps to clean up the resources:

  1. Chiudere il browser che esegue l'applicazione Web AzureMapDemo.html.Close the browser that runs the AzureMapDemo.html web application.
  2. Dal menu a sinistra nel portale di Azure selezionare Tutte le risorse.From the left menu in the Azure portal, select All resources. Quindi, selezionare il proprio account di Mappe di Azure.Then select your Azure Maps account. Nella parte superiore del pannello Tutte le risorse selezionare Elimina.At the top of the All resources blade, select Delete.

Passaggi successiviNext steps

In questa guida introduttiva è stato creato l'account di Mappe di Azure ed è stata creata un'app demo.In this quickstart, you created your Azure Maps account and created a demo app. Per informazioni su Mappe di Azure, consultare le esercitazioni seguenti:Take a look at the following tutorials to learn about Azure Maps:

Per altri esempi di codice e un'esperienza interattiva di codifica, vedere queste guide:For more code examples and an interactive coding experience, see these guides: