Freigeben über

Verwenden des Azure Maps TypeScript REST SDK

Azure Maps stellt eine Sammlung von npm-Modulen für das Azure TypeScript REST SDK bereit. Diese Module bestehen aus Clientbibliotheken, die die Verwendung der Azure Maps-REST-Dienste in Web- oder Node.js-Anwendungen mithilfe von JavaScript oder TypeScript vereinfachen. Eine vollständige Liste der verfügbaren Module finden Sie im JavaScript/TypeScript REST SDK-Entwicklerhandbuch.

Verwenden des REST SDK in einer Webanwendung

  1. Wenn Sie beispielsweise @azure-rest/maps-search verwenden, installieren Sie das Paket mit npm install @azure-rest/maps-search.

  2. Erstellen und Authentifizieren eines MapsSearch-Clients . Um einen Client für den Zugriff auf die Azure Maps Search-APIs zu erstellen, benötigen Sie ein Anmeldeinformationsobjekt. Der Client unterstützt eine Microsoft Entra-Anmeldeinformation oder eine Azure Key-Anmeldeinformation für die Authentifizierung. Möglicherweise müssen Sie entweder @azure/Identität oder @azure/Core-Authentifizierung für verschiedene Authentifizierungsmethoden installieren.

    Wenn Sie einen Abonnementschlüssel für die Authentifizierung verwenden, installieren Sie das Paket mit npm install @azure/core-auth:

    import MapsSearch from "@azure-rest/maps-search";
import { AzureKeyCredential } from "@azure/core-auth";

// Get an Azure Maps key at https://azure.com/maps.
const subscriptionKey = "<Your Azure Maps Key>";

// Use AzureKeyCredential with a subscription key.
const credential = new AzureKeyCredential(subscriptionKey);

// Use the credential to create a client
const client = MapsSearch(credential);

    Wenn Sie Microsoft Entra-ID für die Authentifizierung verwenden, installieren Sie das Paket mit npm install @azure/identity:

    import MapsSearch from "@azure-rest/maps-search";
import { InteractiveBrowserCredential } from "@azure/identity";

// Enter your Azure AD client and tenant ID.
const clientId = "<Your Azure Active Directory Client ID>";
const tenantId = "<Your Azure Active Directory Tenant ID>";

// Enter your Azure Maps client ID.
const mapsClientId = "<Your Azure Maps Client ID>";

// Use InteractiveBrowserCredential with Azure AD client and tenant ID.
const credential = new InteractiveBrowserCredential({
  clientId,
  tenantId
});

// Use the credential to create a client
const client = MapsSearch(credential, mapsClientId);

    Weitere Informationen finden Sie unter Authentifizierung mit Azure Maps.

  3. Der folgende Code verwendet den neu erstellten Azure Maps Search-Client, um eine Adresse zu geocodieren: "1 Microsoft Way, Redmond, WA". Der Code erstellt eine GET-Anforderung und zeigt die Ergebnisse als Tabelle im Textkörper der Seite an.

    // Search for "1 microsoft way, redmond, wa".
const html = [];
const response = await client
  .path("/search/address/{format}", "json")
  .get({ queryParameters: { query: "1 microsoft way, redmond, wa" } });

// Display the total results.
html.push("Total results: ", response.body.summary.numResults, "<br/><br/>");

// Create a table of the results.
html.push("<table><tr><td>Result</td><td>Latitude</td><td>Longitude</td></tr>");
response.body.results.forEach((result) => {
  html.push(
    "<tr><td>",
    result.address.freeformAddress,
    "</td><td>",
    result.position.lat,
    "</td><td>",
    result.position.lon,
    "</td></tr>"
  );
});

html.push("</table>");

// Add the resulting HTML to the body of the page.
document.body.innerHTML = html.join("");

Die folgende Abbildung zeigt die Ergebnisse dieses Beispielcodes, eine Tabelle mit der gesuchten Adresse sowie die resultierenden Koordinaten.

Screenshot einer HTML-Tabelle mit der durchsuchten Adresse und den resultierenden Koordinaten.

Unterstützung für die Azure Government-Cloud

Das Azure Maps Web SDK unterstützt die Azure Government-Cloud. Alle JavaScript- und CSS-URLs, die für den Zugriff auf das Azure Maps Web SDK verwendet werden, bleiben unverändert. Die folgenden Aufgaben müssen jedoch ausgeführt werden, um eine Verbindung mit der Azure Government-Cloudversion der Azure Maps-Plattform herzustellen.

Wenn Sie das interaktive Kartensteuerelement verwenden, fügen Sie die folgende Codezeile hinzu, bevor Sie eine Instanz der Map-Klasse erstellen.

atlas.setDomain('atlas.azure.us');

Achten Sie darauf, beim Authentifizieren der Karten und Dienste das Azure Maps-Authentifizierungsdetail von der Azure Government-Cloudplattform zu verwenden.

Bei Verwendung des TypeScript REST SDK muss die Domäne für die Dienste beim Erstellen einer Instanz des Clients festgelegt werden. Mit dem folgenden Code wird beispielsweise eine Instanz der MapsSearch-Klasse erstellt und die Domäne auf die Azure Government-Cloud verweist.

const client = MapsSearch(credential, { baseUrl: 'https://atlas.azure.us'});

Wenn Sie direkt auf die Azure Maps-REST-Dienste zugreifen, ändern Sie die URL-Domäne in atlas.azure.us. Wenn Sie beispielsweise den Search-API-Dienst verwenden, ändern Sie die URL-Domäne von https://atlas.microsoft.com/search/ zu https://atlas.azure.us/search/.

Nächste Schritte

Erfahren Sie mehr zu den in diesem Artikel verwendeten Klassen und Methoden:

MapsSearch

AzureKeyCredential

InteractiveBrowserCredential

Weitere Codebeispiele, die das TypeScript REST SDK mit Web SDK-Integration verwenden, finden Sie in den folgenden Artikeln:

Anzeigen von Suchergebnissen auf der Karte

Abrufen von Informationen aus einer Koordinate

Anzeigen einer Wegbeschreibung von A nach B