Snabbstart: Skapa en interaktiv sökkarta med Azure Kartor

I den här snabbstarten får du lära dig 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 primärnyckeln som ska användas i demowebbappen.
• Ladda ned och öppna demokartprogrammet.

Den här snabbstarten använder Webb-SDK för Azure Kartor, 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.

Krav

• Om du inte har en Azure-prenumeration kan du skapa ett kostnadsfritt konto innan du börjar.

• Logga in på Azure-portalen.

Skapa ett Azure Maps-konto

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

1. Klicka på Skapa en resurs längst upp till vänster i Azure Portal.

2. I rutan Sök på Marketplace skriver du Azure Kartor.

3. Från Resultat väljer du Azure Kartor. Klicka på knappen Skapa som visas nedanför kartan.

4. Ange följande värden på sidan Skapa Maps-konto:

   • 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 använda befintlig resursgrupp.
   • Namn för ditt nya konto.
   • Prisnivån för det här kontot.
   • Läs licensen och sekretesspolicy och markera kryssrutan för att godkänna villkoren.
   • Klicka på knappen Skapa.

   

Hitta primärnyckeln för ditt konto

När ditt Kartor har skapats hämtar du den primärnyckel som gör att du kan köra frågor mot Kartor API:er.

1. Öppna ditt Maps-konto i portalen.
2. I avsnittet inställningar väljer du Autentisering.
3. Kopiera Primärnyckel till Urklipp. Spara den lokalt för senare användning i den här självstudien.

Ladda ned och uppdatera Azure Kartor demo

1. Gå till interactiveSearch.html. Kopiera innehållet i filen.
2. Spara innehållet i den här filen lokalt som AzureMapDemo.html. Öppna den i en textredigerare.
3. Lägg till värdet för 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 att Azure Active Directory autentisering.
   2. Avkommentera de två sista raderna i funktionen. Den här koden används för autentisering med delad nyckel, den authOptions metod som används i den här snabbstarten.
   3. Ersätt <Your Azure Maps Key> med värdet för Primärnyckel 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.

   

Rensa resurser

Om du inte planerar att fortsätta med självstudierna kan du rensa resurserna genom att följa dessa steg:

1. Stäng webbläsaren som kör webbprogrammet AzureMapDemo.html.
2. Gå till Azure Portal sidan. Välj Alla resurser på huvudportalsidan. Eller klicka på menyikonen i det övre vänstra hörnet. Välj Alla resurser.
3. Klicka på ditt Azure Kartor konto. Klicka på Ta bort överst på sidan.

Fler kodexempel och en interaktiv kodningsupplevelse finns i dessa guider:

• Hitta en adress med Azure Kartor search-tjänsten
• Använda Azure-Kartor Kartkontroll

Nästa steg

I den här snabbstarten skapade du ditt Azure Kartor-konto och skapade ett demoprogram. Ta en titt på följande självstudier för att lära dig mer om Azure Kartor: