Schnellstart: Erstellen einer interaktiven Kartensuche mit Azure Maps

In dieser Schnellstartanleitung wird gezeigt, wie Sie Azure Maps verwenden, um eine Karte mit einer interaktiven Sucherfahrung zu erstellen. Die folgenden grundlegenden Schritte werden erläutert:

  • Erstellen eines eigenen Azure Maps-Kontos
  • Abrufen Ihres Primärschlüssels zur Verwendung in der Demowebanwendung
  • Herunterladen und Öffnen der Karten-Demoanwendung.

In dieser Schnellstartanleitung wird das Azure Maps Web SDK verwendet. Der Azure Maps-Dienst kann jedoch mit jedem Kartensteuerelement verwendet werden, etwa mit diesen beliebten Open-Source-Kartensteuerelementen, für die das Azure Maps-Team Plug-Ins erstellt hat.

Voraussetzungen

  • Wenn Sie kein Azure-Abonnement besitzen, können Sie ein kostenloses Konto erstellen, bevor Sie beginnen.

  • Melden Sie sich beim Azure-Portal an.

Erstellen eines Azure Maps-Kontos

Erstellen Sie mithilfe der folgenden Schritte ein neues Azure Maps-Konto:

  1. Wählen Sie im Azure-Portal oben links die Option Ressource erstellen aus.

  2. Geben Sie im Feld Dienste und Marketplace durchsuchenAzure Maps ein.

  3. Wählen Sie Azure Maps in der angezeigten Dropdownliste aus und klicken Sie dann auf die Schaltfläche Erstellen.

  4. Geben Sie auf der Seite Azure Maps-Kontoressource erstellen die folgenden Werte ein und wählen Sie dann die Schaltfläche Erstellen aus:

    • Abonnement, das Sie für dieses Konto verwenden möchten
    • Name der Ressourcengruppe für dieses Konto. Sie können für die Ressourcengruppe die Option Neu erstellen oder die Option Vorhandene auswählen auswählen.
    • Name des neuen Azure Maps-Kontos.
    • Der Tarif für dieses Konto. Wählen Sie Gen2.
    • Lesen Sie die Lizenzbedingungen und die Datenschutzerklärung und aktivieren Sie zum Akzeptieren der Bestimmungen anschließend das Kontrollkästchen.

    Screenshot: Erstellen einer Azure Maps-Kontoressourcenseite im Azure-Portal.

Abrufen des Primärschlüssels für Ihr Konto

Rufen Sie nach der Erstellung des Azure Maps-Kontos den Primärschlüssel ab, mit dem Sie die Maps-APIs abfragen können.

  1. Öffnen Sie Ihr Maps-Konto im Portal.
  2. Wählen Sie im Abschnitt „Einstellungen“ die Option Authentifizierung aus.
  3. Kopieren Sie den Primärschlüssel und speichern Sie ihn lokal zur späteren Verwendung in diesem Tutorial ab.

Screenshot: Anzeige Ihres Azure Maps-Primärschlüssels im Azure-Portal

Hinweis

In dieser Schnellstartanleitung wird zu Demonstrationszwecken der Ansatz zur Authentifizierung mit gemeinsam verwendetem Schlüssel verwendet. Der bevorzugte Ansatz für jede Produktionsumgebung ist jedoch die Verwendung der Authentifizierung über Azure Active Directory.

Herunterladen und Aktualisieren der Azure Maps-Demo

  1. Wechseln Sie zu interactiveSearch.html. Kopieren Sie den Inhalt der Datei.
  2. Speichern Sie den Inhalt dieser Datei lokal unter AzureMapDemo.html. Öffnen Sie die Datei in einem Text-Editor.
  3. Fügen Sie den Wert für Primärschlüssel hinzu, den Sie im vorherigen Abschnitt kopiert haben.
    1. Kommentieren Sie den gesamten Code in der Funktion authOptions aus. Dieser Code wird für die Azure Active Directory-Authentifizierung verwendet.
    2. Heben Sie die Auskommentierung der letzten beiden Zeilen in der Funktion authOptions auf. Dieser Code wird für die Authentifizierung mit gemeinsam verwendetem Schlüssel verwendet. Dieser Ansatz wird in dieser Schnellstartanleitung verwendet.
    3. Ersetzen Sie <Your Azure Maps Key> durch den Primärschlüssel, den Sie im vorherigen Abschnitt kopiert haben.

Öffnen der Demoanwendung

  1. Öffnen Sie die Datei AzureMapDemo.html in einem Browser Ihrer Wahl.

  2. Die Karte der Stadt Los Angeles wird angezeigt. Vergrößern und verkleinern Sie sie, um zu sehen, wie die Karte abhängig vom Zoomfaktor automatisch mit mehr oder weniger Informationen gerendert wird.

  3. Ändern Sie den Standardmittelpunkt der Karte. Suchen Sie in der Datei AzureMapDemo.html nach der Variable center. Ersetzen Sie den Wert des Längengrad/Breitengrad-Paars für diese Variable durch die neuen Werte [-74,0060, 40,7128] . Speichern Sie die Datei, und aktualisieren Sie Ihren Browser.

  4. Probieren Sie die interaktiven Suchfunktionen aus. Geben Sie Restaurants in das Suchfeld in der oberen linken Ecke der Demowebanwendung ein.

  5. Bewegen Sie den Mauszeiger über die Liste der Adressen und Standorte, die unterhalb des Suchfelds angezeigt wird. Beachten Sie dabei, wie über dem entsprechenden Pin auf der Karte Informationen zum jeweiligen Standort angezeigt werden. Zum Schutz von Privatunternehmen werden fiktive Namen und Adressen angezeigt.

    Screenshot: Webanwendung für die interaktive Kartensuche.

Bereinigen von Ressourcen

Warnung

In den Tutorials, die im Abschnitt Nächste Schritte aufgeführt sind, wird ausführlich erläutert, wie Sie Azure Maps mit Ihrem Konto verwenden und konfigurieren. Wenn Sie mit den Tutorials fortfahren möchten, sollten Sie die in diesem Schnellstart erstellten Ressourcen nicht bereinigen.

Falls Sie nicht mit den Tutorials fortfahren möchten, führen Sie die folgenden Schritte aus, um die Ressourcen zu bereinigen:

  1. Schließen Sie den Browser, in dem die Webanwendung AzureMapDemo.html ausgeführt wird.
  2. Navigieren Sie zum Azure-Portal. Wählen Sie Alle Ressourcen auf der Hauptseite des Portals aus, oder wählen Sie das Menüsymbol in der oberen linken Ecke und dann Alle Ressourcen aus.
  3. Wählen Sie Ihr Azure Maps-Konto aus und wählen Sie anschließend am oberen Rand der Seite die Option Löschen aus.

Weitere Codebeispiele und eine interaktive Codierumgebung finden Sie in den folgenden Artikeln:

Nächste Schritte

In dieser Schnellstartanleitung haben Sie ein Azure Maps-Konto und eine Demoanwendung erstellt. Sehen Sie sich die folgenden Tutorials an, um mehr über Azure Maps zu erfahren: