Schnellstart: Erstellen einer interaktiven Kartensuche mit Azure Maps

In diesem Schnellstart wird gezeigt, wie Sie Azure Maps verwenden, um eine Karte zu erstellen, die einem Benutzer eine interaktive Sucherfahrung bereitstellt. Die folgenden grundlegenden Schritte werden erläutert:

• Erstellen eines eigenen Azure Maps-Kontos
• Rufen Sie Ihren Azure Maps-Abonnementschlüssel zur Verwendung in der Demowebanwendung ab.
• 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.

   

Abrufen des Abonnementschlüssels für Ihr Konto

Rufen Sie nach der Erstellung des Azure Maps-Kontos den Abonnementschlü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.

Hinweis

In diesem Schnellstart wird zu Demonstrationszwecken der Ansatz zur Authentifizierung mit gemeinsam verwendetem Schlüssel verwendet. Der bevorzugte Ansatz in Produktionsumgebungen ist jedoch die Verwendung der Authentifizierung über [Microsoft Entra ID].

Herunterladen und Aktualisieren der Azure Maps-Demo

1. Kopieren Sie die Inhalte der Datei: Interactive Search Quickstart.html.
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 authOptions-Funktion aus. Dieser Code wird für die Microsoft Entra-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 Wert des Abonnementschlüssels aus dem vorherigen Abschnitt.

Ö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.

   

Bereinigen von Ressourcen

Wichtig

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:

• Suchen nach einer Adresse mit dem Suchdienst von Azure Maps
• Verwenden des Azure Maps-Kartensteuerelements

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:

Suchen nach Points of Interest in der Nähe mit Azure Maps