Quickstart: Een interactief doorzoekbare kaart maken met Azure Maps

  • Artikel
  • 3 minuten om te lezen

In deze quickstart leert u hoe u Azure Kaarten om een kaart te maken die gebruikers een interactieve zoekervaring biedt. U wordt door de volgende basisstappen geleid:

  • Uw eigen Azure Maps-account maken.
  • Haal uw primaire sleutel op om te gebruiken in de demo-webtoepassing.
  • De demo-kaarttoepassing downloaden en openen.

In deze quickstart wordt gebruikgemaakt van de Azure Kaarten Web-SDK, maar de Azure Kaarten-service kan worden gebruikt met elk kaartbesturingselement, zoals deze populaire opensource-kaartbesturingselementen waar het Azure Kaarten-team invoeginvoegaars voor heeft gemaakt.

Vereisten

Een Azure Maps-account maken

Voer de volgende stappen uit om een nieuw Azure Maps-account te maken:

  1. Klik in de linkerbovenhoek van Azure Portal op Een resource maken.

  2. Typ Azure Maps in het vak Marketplace doorzoeken.

  3. Selecteer Azure Maps in de Resultaten. Klik op de knop Maken die onder de kaart wordt weergegeven.

  4. Voer de volgende waarden in op de pagina Azure Kaarten-account maken:

    • Het Abonnement dat u wilt gebruiken voor dit account.
    • De naam van de Resourcegroep voor dit account. U kunt kiezen om een Nieuwe of Bestaande resourcegroep te gebruiken.
    • De Naam van uw nieuwe account.
    • De Prijscategorie voor dit account.
    • Lees de licentie en de privacyverklaring, en schakel het selectievakje in om de voorwaarden te accepteren.
    • Klik op de knop Maken.

    Maps-account maken in de portal

De primaire sleutel voor uw account ophalen

Als het Azure Kaarten-account is gemaakt, haalt u de primaire sleutel op waarmee u query's kunt uitvoeren op de API's van kaarten.

  1. Open uw Maps-account in de portal.
  2. Selecteer Verificatie in de sectie Instellingen.
  3. Kopieer de Primaire Sleutel naar het Klembord. Sla de sleutel lokaal op voor gebruik verderop in deze zelfstudie.

Primaire sleutel voor Azure Maps ophalen in de Azure-portal

Notitie

In deze quickstart wordt gebruikgemaakt van de shared key-verificatiemethode voor demonstratiedoeleinden, maar de voorkeur voor elke productieomgeving is het gebruik van Azure Active Directory verificatie.

De Demo van Azure Kaarten downloaden en bijwerken

  1. Ga naar interactiveSearch.html. Kopieer de inhoud van het bestand.
  2. Sla de inhoud van dit bestand lokaal op als AzureMapDemo.html. Open het in een teksteditor.
  3. Voeg de waarde van de primaire sleutel toe die u in de vorige sectie hebt
    1. Als u alle code in de functie uitcommenter, wordt deze code gebruikt voor authOptions Azure Active Directory verificatie.
    2. Als u de laatste twee regels in de functie uitcommentt, wordt deze code gebruikt voor gedeelde sleutelverificatie, de benadering authOptions die in deze quickstart wordt gebruikt.
    3. Vervang <Your Azure Maps Key> door de waarde van de primaire sleutel uit de vorige sectie.

De demo-toepassing openen

  1. Open het bestand AzureMapDemo.html in een browser naar keuze.

  2. Bekijk de kaart van Los Angeles. Zoom in en uit om te zien hoe de kaart automatisch met meer of minder informatie wordt weergegeven, afhankelijk van het zoomniveau.

  3. Wijzig de standaardinstelling voor het midden van de kaart. Zoek in het bestand AzureMapDemo.html naar de variabele center. Vervang de lengte- en breedtegraad voor deze variabele door deze nieuwe waarden: [-74.0060, 40.7128] . Sla het bestand op en vernieuw de browser.

  4. Probeer de interactieve zoekervaring uit. Zoek in het zoekvak linksboven in de demo-webtoepassing naar restaurants.

  5. Beweeg de muis over de lijst met adressen en locaties die worden weergegeven onder het zoekvak. U ziet hoe bij de bijbehorende speld op de kaart een pop-upvenster met informatie over die locatie wordt weergegeven. Ten behoeve van de privacy van particuliere bedrijven worden er fictieve namen en adressen weergegeven.

    Webtoepassing voor interactief zoeken in kaarten

Resources opschonen

Waarschuwing

In de zelfstudies in de sectie Volgende stappen vindt u gedetailleerde informatie over het gebruik en de configuratie van Azure Maps met uw account. Als u wilt doorgaan met de zelfstudies, verwijder de resources die u in deze quickstart hebt gemaakt dan niet.

Als u niet van plan bent om door te gaan naar de zelfstudies, voert u deze stappen uit voor het opschonen van de resources:

  1. Sluit de browser waarin de AzureMapDemo.html-webtoepassing wordt uitgevoerd.
  2. Navigeer naar de Azure-portalpagina. Selecteer Alle resources op de hoofdpagina van de portal. Of klik op het menupictogram in de linkerbovenhoek. Selecteer Alle resources.
  3. Klik op uw Azure Maps-account. Klik bovenaan de pagina op Verwijderen.

Bekijk de volgende handleidingen voor meer codevoorbeelden en een interactieve coderingservaring:

Volgende stappen

In deze quickstart hebt u een Azure Maps-account en een demo-toepassing gemaakt. Bekijk de volgende zelfstudies voor meer informatie over Azure Maps:

Zoeken naar nuttige plaatsen in de buurt met Azure Maps