So zeigen Sie den Verkehr in Echtzeit auf einer Karte an - Amazon Location Service
Erstellen Sie eine Karte mit Verkehrsdaten in Echtzeit

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

So zeigen Sie den Verkehr in Echtzeit auf einer Karte an

Mit Amazon Location Service können Sie Ihrer Karte Verkehrsfunktionen hinzufügen. Auf diese Weise werden Verkehrsdaten in Echtzeit bereitgestellt, die aktuelle Verkehrslage wie aktuelle Verkehrsstaus, Bauarbeiten und Zwischenfälle anzeigen und Ihnen so bei der Routenwahl helfen.

Erstellen Sie eine Karte mit Verkehrsdaten in Echtzeit

Dieses Beispiel zeigt, wie eine Karte mit Verkehrsdaten in Echtzeit erstellt wird.

index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Traffic Map</title>
        <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.css' />
                <script src='https://unpkg.com/maplibre-gl@5.x/dist/maplibre-gl.js'></script>
    </head>
    <body style="margin: 0; padding: 0;">
        <div id="map" style="width: 100%; height: 100vh;"></div>
        <script>
            const apiKey = "Add Your Api Key";
            const mapStyle = "Standard";
            const awsRegion = "us-east-1";

            const map = new maplibregl.Map({
                container: 'map',
                style: `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?traffic=All&key=${apiKey}`,
                center: [-74.0060 ,40.7128], // New York City coordinates for traffic visibility
                zoom: 12,
                validateStyle: false, // Disable style validation for faster map load
            });
        </script>
    </body>
</html>
style.css
body {
    margin: 0;
    padding: 0;
}

#map {
    width: 100%;
    height: 100vh;
}