Guida introduttiva: Creare una mappa di ricerca interattiva con Mappe di Azure

Questa guida introduttiva illustra come usare Mappe di Azure per creare una mappa che offre agli utenti un'esperienza di ricerca interattiva. L'articolo descrive le operazioni di base seguenti:

  • Creare un proprio account di Mappe di Azure.
  • Ottenere la chiave di sottoscrizione Mappe di Azure da usare nell'applicazione Web demo.
  • Scaricare e aprire l'applicazione demo per le mappe.

Questa guida introduttiva usa l'SDK Web di Mappe di Azure, ma il servizio Mappe di Azure può essere usato con qualsiasi controllo mappa, ad esempio questi controlli comuni della mappa open source per cui il team Mappe di Azure ha creato il plug-in.

Prerequisiti

Creare un account di Mappe di Azure

Creare un account di Mappe di Azure eseguendo questa procedura:

  1. Selezionare Crea una risorsa nell'angolo superiore sinistro della portale di Azure.

  2. Digitare Mappe di Azure nella casella servizio di ricerca e Marketplace.

  3. Selezionare Mappe di Azure nell'elenco a discesa visualizzato, quindi selezionare il pulsante Crea.

  4. Nella pagina Crea una risorsa account Mappe di Azure immettere i valori seguenti e quindi selezionare il pulsante Crea:

    • La sottoscrizione da usare per l'account.
    • Il nome del gruppo di risorse per l'account. È possibile scegliere Crea nuovo o Selezionare un gruppo di risorse esistente .
    • Nome del nuovo account Mappe di Azure.
    • Piano tariffario dell'account. Selezionare Gen2.
    • Leggere l'Informativa sulla licenza e la privacy, quindi selezionare la casella di controllo per accettare le condizioni.

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

Ottenere la chiave di sottoscrizione per l'account

Dopo aver creato correttamente l'account Mappe di Azure, recuperare la chiave di sottoscrizione che consente di eseguire query sulle API Mappe.

  1. Aprire l'account di Mappe nel portale.
  2. Nella sezione delle impostazioni selezionare Autenticazione.
  3. Copiare la chiave primaria e salvarla in locale per usarla più avanti in questa esercitazione.

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

Nota

Questa guida introduttiva usa l'approccio di autenticazione con chiave condivisa a scopo dimostrativo, ma l'approccio preferito per qualsiasi ambiente di produzione consiste nell'usare l'autenticazione [Microsoft Entra ID].

Scaricare e aggiornare la demo Mappe di Azure

  1. Copiare il contenuto del file: Interactive Search Quickstart.html.
  2. Salvare il contenuto del file in locale come AzureMapDemo.html. Aprirlo in un editor di testo.
  3. Aggiungere il valore chiave primaria ottenuto nella sezione precedente
    1. Impostare come commento tutto il codice nella authOptions funzione, questo codice viene usato per l'autenticazione di Microsoft Entra.
    2. Rimuovere il commento dalle ultime due righe della authOptions funzione, questo codice viene usato per l'autenticazione con chiave condivisa, l'approccio usato in questa guida introduttiva.
    3. Sostituire <Your Azure Maps Key> con il valore della chiave di sottoscrizione della sezione precedente.

Aprire l'applicazione demo

  1. Aprire il file AzureMapDemo.html nel browser che si preferisce.

  2. Osservare la mappa visualizzata della città di 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.

  3. Modificare il centro predefinito della mappa. Nel file AzureMapDemo.html cercare la variabile denominata center. Sostituire il valore della coppia longitudine, latitudine di questa variabile con i nuovi valori [-74,0060, 40,7128]. Salvare il file e aggiornare il browser.

  4. Provare l'esperienza di ricerca interattiva. Nella casella di ricerca nell'angolo in alto a sinistra dell'applicazione Web demo cercare restaurants.

  5. Spostare il puntatore del mouse sull'elenco di indirizzi e posizioni visualizzato sotto la casella di ricerca. Osservare che l'indicatore corrispondente sulla mappa visualizza le informazioni sulla posizione corrispondente. Per la privacy delle aziende private, sono visualizzati nomi e indirizzi fittizi.

    Screenshot showing the interactive map search web application.

Pulire le risorse

Importante

Le esercitazioni elencate nella sezione Passaggi successivi offrono indicazioni dettagliate su come usare e configurare Mappe di Azure con il proprio account. Non eliminare le risorse create in questa guida introduttiva se si prevede di continuare con le esercitazioni.

Se non si intende continuare con le esercitazioni, pulire le risorse eseguendo questa procedura:

  1. Chiudere il browser che esegue l'applicazione Web AzureMapDemo.html.
  2. Passare al portale di Azure. Selezionare Tutte le risorse nella pagina principale del portale oppure selezionare l'icona del menu nell'angolo in alto a sinistra e quindi Tutte le risorse.
  3. Selezionare l'account Mappe di Azure, quindi selezionare Elimina nella parte superiore della pagina.

Per altri esempi di codice e un'esperienza di codifica interattiva, vedere questi articoli:

Passaggi successivi

In questa guida introduttiva sono stati creati un account Mappe di Azure e un'applicazione demo. Per altre informazioni su Mappe di Azure, esaminare queste esercitazioni: