Como mostrar o tráfego em tempo real em um mapa - Amazon Location Service
Faça um mapa com tráfego em tempo real

As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

Como mostrar o tráfego em tempo real em um mapa

Usando o Amazon Location Service, você pode adicionar recursos de tráfego ao seu mapa. Isso fornece dados de tráfego em tempo real para mostrar as condições atuais do tráfego, como congestionamento rodoviário atual, construção e incidentes, ajudando você a fazer escolhas de rota.

Faça um mapa com tráfego em tempo real

Este exemplo mostra como criar um mapa com dados de tráfego em tempo real.

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