Comment afficher les détails du transport en commun sur une carte - Amazon Location Service
Créez une carte avec les détails du transport en commun

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 les détails du transport en commun sur une carte

Amazon Location Service vous permet d'ajouter des fonctionnalités de transport en commun aux cartes. TransitTravelModeAffiche les informations d'itinéraire pour le transport en commun, telles que les lignes de train codées par couleur. Vérifiez également comment configurer la logistique TravelMode pour des options supplémentaires.

Créez une carte avec les détails du transport en commun

Cet exemple montre comment créer une carte avec les détails du transport en commun avec Transit TravelMode pour les transports en commun.

index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Transit 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?travel-modes=Transit&key=${apiKey}`,
                center: [-74.0060 ,40.7128],
                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;
}