Come mostrare il traffico in tempo reale su una mappa - Servizio di posizione Amazon
Crea una mappa con il traffico in tempo reale

Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

Come mostrare il traffico in tempo reale su una mappa

Utilizzando Amazon Location Service puoi aggiungere funzionalità di traffico alla tua mappa. Ciò fornisce dati sul traffico in tempo reale per mostrare le condizioni attuali del traffico, come la congestione stradale, i lavori in corso e gli incidenti, aiutandoti a fare scelte di percorso.

Crea una mappa con il traffico in tempo reale

Questo esempio mostra come creare una mappa con dati sul traffico in tempo reale.

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;
}