Snabbstart: Skapa en interaktiv sökkarta med Azure Maps

Den här snabbstarten visar hur du använder Azure Maps för att skapa en karta som ger användarna en interaktiv sökupplevelse. Vi går igenom de grundläggande stegen:

  • Skapa ditt eget Azure Maps-konto.
  • Hämta din Azure Maps-prenumerationsnyckel som ska användas i demowebbappen.
  • Ladda ned och öppna demokartprogrammet.

Förutsättningar

Skapa ett Azure Maps-konto

Skapa ett nytt Azure Maps-konto med följande steg:

  1. Välj Skapa en resurs i det övre vänstra hörnet i Azure Portal.

  2. Skriv Azure Maps i rutan Sök tjänster och Marketplace.

  3. Välj Azure Maps i listrutan som visas och välj sedan knappen Skapa.

  4. På resurssidan Skapa ett Azure Maps-konto anger du följande värden och väljer sedan knappen Skapa :

    • Den Prenumeration som ska användas för det här kontot.
    • Namnet på Resursgrupp för kontot. Du kan välja Att skapa ny eller Välj befintlig resursgrupp.
    • Namnet på ditt nya Azure Maps-konto.
    • Prisnivån för det här kontot. Bekräfta att Gen2 är vald.
    • Läs licens- och sekretesspolicyn och markera sedan kryssrutan för att godkänna villkoren.

    Skärmbild som visar resurssidan Skapa ett Azure Maps-konto i Azure Portal.

Hämta prenumerationsnyckeln för ditt konto

När ditt Azure Maps-konto har skapats hämtar du prenumerationsnyckeln som gör att du kan köra frågor mot Maps-API:erna.

  1. Öppna ditt Maps-konto i portalen.
  2. I avsnittet Inställningar väljer du Autentisering.
  3. Kopiera primärnyckeln och spara den lokalt för att använda den senare i den här självstudien.

Skärmbild som visar din Azure Maps-prenumerationsnyckel i Azure Portal.

Kommentar

Den här snabbstarten använder metoden för autentisering med delad nyckel i demonstrationssyfte, men den bästa metoden för alla produktionsmiljöer är att använda Microsoft Entra-ID-autentisering .

Ladda ned och uppdatera Azure Maps-demonstrationen

  1. Kopiera innehållet i filen: Interaktiv sökning Quickstart.html.
  2. Spara innehållet i den här filen lokalt som AzureMapDemo.html. Öppna den i en textredigerare.
  3. Lägg till värdet primärnyckel som du fick i föregående avsnitt
    1. Kommentera ut all kod i authOptions funktionen, den här koden används för Microsoft Entra-autentisering.
    2. Avkommentera de två sista raderna i funktionen authOptions. Den här koden används för Shared Key-autentisering, vilket är den metod som används i den här snabbstarten.
    3. Ersätt <Your Azure Maps Key> med prenumerationsnyckelvärdet från föregående avsnitt.

Öppna demoprogrammet

  1. Öppna filen AzureMapDemo.html i en webbläsare.

  2. Observera kartan som visas för staden Los Angeles. Zooma in och ut om du vill se hur kartan automatiskt återges med mer eller mindre information beroende på zoomnivån.

  3. Ändra kartans standardmittpunkt. I filen AzureMapDemo.html söker du efter variabeln med namnet center. Ersätt variabelns parvärde för longitud, latitud med de nya värdena [-74.0060, 40.7128]. Spara filen och uppdatera webbläsaren.

  4. Prova den interaktiva sökupplevelsen. I sökrutan i det övre vänstra hörnet i demowebbappen söker du efter restauranger.

  5. Flytta musen över listan med adresser och platser som visas under sökrutan. Observera hur motsvarande nål på kartan visar information om den platsen. Observera att namnen och adresserna som visas är fiktiva för att skydda privata företag.

    Skärmbild som visar webbprogrammet för interaktiv kartsökning.

Rensa resurser

Viktigt!

Självstudierna som listas i avsnittet Nästa steg beskriver hur du använder och konfigurerar Azure Maps med hjälp av ditt konto. Rensa inte resurserna som du skapar i den här snabbstarten om du planerar att fortsätta med självstudierna.

Om du inte planerar att fortsätta med självstudierna gör du följande för att rensa resurserna:

  1. Stäng webbläsaren som kör webbprogrammet AzureMapDemo.html.
  2. Navigera till Azure-portalen. Välj Alla resurser på huvudportalsidan eller välj menyikonen i det övre vänstra hörnet och sedan Alla resurser.
  3. Välj ditt Azure Maps-konto och välj sedan Ta bort överst på sidan.

Fler kodexempel och en interaktiv kodningsupplevelse finns i följande artiklar:

Nästa steg

I den här snabbstarten skapade du ett Azure Maps-konto och ett demoprogram. Ta del av följande självstudier om du vill lära dig mer om Azure Maps:

Sök efter intressanta platser i närheten med Azure Maps

  • Last updated on