Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.
Comment afficher le trafic en temps réel sur une carte
À l'aide d'Amazon Location Service, vous pouvez ajouter des fonctionnalités relatives au trafic sur votre carte. Cela fournit des données de trafic en temps réel pour montrer les conditions de circulation actuelles, telles que les embouteillages actuels, les travaux de construction et les incidents, vous aidant ainsi à choisir votre itinéraire.
Créez une carte avec le trafic en temps réel
Cet exemple montre comment créer une carte avec des données de trafic en temps réel.
- 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;
}
