Come mostrare i dettagli del transito su una mappa - Servizio di posizione Amazon
Crea una mappa con i dettagli del transito

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 i dettagli del transito su una mappa

Amazon Location Service ti consente di aggiungere funzionalità di transito alle mappe. TransitTravelModeVisualizza informazioni sul percorso per il trasporto pubblico, come le linee ferroviarie con codice a colori. Controlla anche come impostare la logistica TravelMode per opzioni aggiuntive.

Crea una mappa con i dettagli del transito

Questo esempio mostra come creare una mappa con i dettagli del transito con Transit TravelMode for public transport.

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