Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
Das Web SDK für Azure Maps stellt das Modul „Dienste“ bereit. Dieses Modul ist eine Hilfsbibliothek, die die Verwendung der REST-Dienste von Azure Maps in Web- oder Node.js-Anwendungen vereinfacht, indem JavaScript oder TypeScript verwendet wird.
Hinweis
Einstellung des Azure Maps Web SDK-Dienstmoduls
Das Azure Maps Web SDK-Dienstmodul ist jetzt veraltet und wird am 30.9.26. eingestellt. Um Dienstunterbrechungen zu vermeiden, empfehlen wir die Migration zum JavaScript-REST-SDK von Azure Maps bis 30.9.26. Weitere Informationen finden Sie im JavaScript/TypeScript REST SDK Developers Guide (Vorschau).
Verwenden des Moduls „Dienste“ auf einer Webseite
Erstellen Sie eine neue HTML-Datei.
Laden Sie das Modul „Dienste“ von Azure Maps. Hierzu stehen zwei Möglichkeiten zur Verfügung:
- Verwenden Sie die global gehostete Azure Content Delivery Network-Version des Azure Maps-Moduls „Dienste“. Fügen Sie der Datei einen Skriptverweis zum
<head>
-Element hinzu:
<script src="https://atlas.microsoft.com/sdk/javascript/service/2/atlas-service.min.js"></script>
Laden Sie alternativ das Modul „Dienste“ für den Quellcode des Web SDK von Azure Maps lokal mithilfe des npm-Pakets azure-maps-rest, und hosten Sie es anschließend zusammen mit Ihrer App. Dieses Paket enthält außerdem TypeScript-Definitionen. Verwenden Sie diesen Befehl:
npm install azure-maps-rest
Verwenden Sie dann eine Importdeklaration, um das Modul in eine Quelldatei einzufügen:
import * as service from "azure-maps-rest";
- Verwenden Sie die global gehostete Azure Content Delivery Network-Version des Azure Maps-Moduls „Dienste“. Fügen Sie der Datei einen Skriptverweis zum
Erstellen Sie eine Authentifizierungspipeline. Die Pipeline muss erstellt werden, bevor Sie einen URL-Clientendpunkt für den Dienst initialisieren können. Verwenden Sie Ihren eigenen Azure Maps-Kontoschlüssel oder Ihre Microsoft Entra-Anmeldeinformationen, um den Suchdienstclient von Azure Maps zu authentifizieren. In diesem Beispiel wird der URL-Client des Suchdiensts erstellt.
Falls Sie einen Abonnementschlüssel für die Authentifizierung verwenden:
// Get an Azure Maps key at https://azure.com/maps. var subscriptionKey = '<Your Azure Maps Key>'; // Use SubscriptionKeyCredential with a subscription key. var subscriptionKeyCredential = new atlas.service.SubscriptionKeyCredential(subscriptionKey); // Use subscriptionKeyCredential to create a pipeline. var pipeline = atlas.service.MapsURL.newPipeline(subscriptionKeyCredential, { retryOptions: { maxTries: 4 } // Retry options }); // Create an instance of the SearchURL client. var searchURL = new atlas.service.SearchURL(pipeline);
Wenn Sie Microsoft Entra ID für die Authentifizierung verwenden:
// Enter your Azure AD client ID. var clientId = "<Your Azure Active Directory Client ID>"; // Use TokenCredential with OAuth token (Azure AD or Anonymous). var aadToken = await getAadToken(); var tokenCredential = new atlas.service.TokenCredential(clientId, aadToken); // Create a repeating time-out that will renew the Azure AD token. // This time-out must be cleared when the TokenCredential object is no longer needed. // If the time-out is not cleared, the memory used by the TokenCredential will never be reclaimed. var renewToken = async () => { try { console.log("Renewing token"); var token = await getAadToken(); tokenCredential.token = token; tokenRenewalTimer = setTimeout(renewToken, getExpiration(token)); } catch (error) { console.log("Caught error when renewing token"); clearTimeout(tokenRenewalTimer); throw error; } } tokenRenewalTimer = setTimeout(renewToken, getExpiration(aadToken)); // Use tokenCredential to create a pipeline. var pipeline = atlas.service.MapsURL.newPipeline(tokenCredential, { retryOptions: { maxTries: 4 } // Retry options }); // Create an instance of the SearchURL client. var searchURL = new atlas.service.SearchURL(pipeline); function getAadToken() { // Use the signed-in auth context to get a token. return new Promise((resolve, reject) => { // The resource should always be https://atlas.microsoft.com/. const resource = "https://atlas.microsoft.com/"; authContext.acquireToken(resource, (error, token) => { if (error) { reject(error); } else { resolve(token); } }); }) } function getExpiration(jwtToken) { // Decode the JSON Web Token (JWT) to get the expiration time stamp. const json = atob(jwtToken.split(".")[1]); const decode = JSON.parse(json); // Return the milliseconds remaining until the token must be renewed. // Reduce the time until renewal by 5 minutes to avoid using an expired token. // The exp property is the time stamp of the expiration, in seconds. const renewSkew = 300000; return (1000 * decode.exp) - Date.now() - renewSkew; }
Weitere Informationen finden Sie unter Authentifizierung mit Azure Maps.
Der folgende Code verwendet den neu erstellten URL-Client des Azure Maps-Suchdiensts, um eine Adresse mit einem Geocode zu versehen: "1 Microsoft Way, Redmond, WA". Der Code verwendet die
searchAddress
-Funktion und zeigt die Ergebnisse als Tabelle im Textkörper der Seite an.// Search for "1 microsoft way, redmond, wa". searchURL.searchAddress(atlas.service.Aborter.timeout(10000), '1 microsoft way, redmond, wa') .then(response => { var html = []; // Display the total results. html.push('Total results: ', response.summary.numResults, '<br/><br/>'); // Create a table of the results. html.push('<table><tr><td></td><td>Result</td><td>Latitude</td><td>Longitude</td></tr>'); for(var i=0;i<response.results.length;i++){ html.push('<tr><td>', (i+1), '.</td><td>', response.results[i].address.freeformAddress, '</td><td>', response.results[i].position.lat, '</td><td>', response.results[i].position.lon, '</td></tr>'); } html.push('</table>'); // Add the resulting HTML to the body of the page. document.body.innerHTML = html.join(''); });
Es folgt das voll funktionsfähige Codebeispiel:
<html>
<head>
<script src="https://atlas.microsoft.com/sdk/javascript/service/2/atlas-service.min.js"></script>
<script type="text/javascript">
// Get an Azure Maps key at https://azure.com/maps.
var subscriptionKey = '{Your-Azure-Maps-Subscription-key}';
// Use SubscriptionKeyCredential with a subscription key.
var subscriptionKeyCredential = new atlas.service.SubscriptionKeyCredential(subscriptionKey);
// Use subscriptionKeyCredential to create a pipeline.
var pipeline = atlas.service.MapsURL.newPipeline(subscriptionKeyCredential, {
retryOptions: { maxTries: 4 } // Retry options
});
// Create an instance of the SearchURL client.
var searchURL = new atlas.service.SearchURL(pipeline);
// Search for "1 microsoft way, redmond, wa".
searchURL.searchAddress(atlas.service.Aborter.timeout(10000), '1 microsoft way, redmond, wa')
.then(response => {
var html = [];
// Display the total results.
html.push('Total results: ', response.summary.numResults, '<br/><br/>');
// Create a table of the results.
html.push('<table><tr><td></td><td>Result</td><td>Latitude</td><td>Longitude</td></tr>');
for(var i=0;i<response.results.length;i++){
html.push('<tr><td>', (i+1), '.</td><td>',
response.results[i].address.freeformAddress,
'</td><td>',
response.results[i].position.lat,
'</td><td>',
response.results[i].position.lon,
'</td></tr>');
}
html.push('</table>');
// Add the resulting HTML to the body of the page.
document.body.innerHTML = html.join('');
});
</script>
</head>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
}
td, th {
border: 1px solid black;
padding: 5px;
}
</style>
<body> </body>
</html>
Die folgende Abbildung ist ein Screenshot, der die Ergebnisse dieses Beispielcodes zeigt, eine Tabelle mit der gesuchten 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. Sie müssen jedoch die folgenden Schritte ausführen, um eine Verbindung mit der Azure Government-Cloudversion für die 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');
Verwenden Sie beim Authentifizieren der Karte und der Dienste unbedingt die Azure Maps-Authentifizierungsinformationen der Azure Government-Cloudplattform.
Die Domäne muss für die Dienste beim Erstellen einer Instanz eines API-URL-Endpunkts festgelegt werden. Mit dem folgenden Code wird z. B. eine Instanz der SearchURL
-Klasse erstellt und mit der Domäne auf die Azure Government-Cloud verwiesen.
var searchURL = new atlas.service.SearchURL(pipeline, '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 z. B. den Such-API-Dienst verwenden, ändern Sie die URL-Domäne von https://atlas.microsoft.com/search/
in https://atlas.azure.us/search/
.
Nächste Schritte
Erfahren Sie mehr zu den in diesem Artikel verwendeten Klassen und Methoden:
In den folgenden Artikeln finden Sie weitere Codebeispiele, die das Modul „Dienste“ verwenden: