Snabbstart: Skapa en interaktiv sökkarta med Azure Kartor

  • Artikel

Den här snabbstarten visar hur du använder Azure Kartor 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 Kartor-prenumerationsnyckel som ska användas i demowebbappen.
  • Ladda ned och öppna demokartprogrammet.

Den här snabbstarten använder Azure Kartor Web SDK, men Azure Kartor-tjänsten kan användas med valfri kartkontroll, till exempel dessa populära kartkontroller med öppen källkod som Azure Kartor-teamet har skapat plugin-program för.

Förutsättningar

Skapa ett Azure Maps-konto

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

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

  2. Skriv Azure Kartor i rutan tjänsten Search och Marketplace.

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

  4. På resurssidan Skapa ett Azure Kartor-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 Kartor-konto.
    • Prisnivån för det här kontot. Välj Gen2.
    • Läs licens- och sekretesspolicyn och markera sedan kryssrutan för att godkänna villkoren.

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

Hämta prenumerationsnyckeln för ditt konto

När ditt Azure Kartor-konto har skapats hämtar du prenumerationsnyckeln som gör att du kan fråga Kartor API:er.

  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.

Screenshot showing your Azure Maps subscription key in the 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 demonstrationen av Azure Kartor

  1. Kopiera innehållet i filen: Snabbstart.html för interaktiv sökning.
  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. Om du avkommenteras de två sista raderna authOptions i funktionen används den här koden för autentisering med delad nyckel, 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.

    Screenshot showing the interactive map search web application.

Rensa resurser

Viktigt!

Självstudierna i avsnittet Nästa steg beskriver hur du använder och konfigurerar Azure Kartor med 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 Kartor-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 Kartor-konto och ett demoprogram. Ta en titt på följande självstudier för att lära dig mer om Azure Kartor:

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