맵에 전송 세부 정보를 표시하는 방법 - Amazon Location Service
전송 세부 정보가 포함된 맵 생성

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

맵에 전송 세부 정보를 표시하는 방법

Amazon Location Service를 사용하면 맵에 전송 기능을 추가할 수 있습니다. 에는 색상으로 구분된 열차선과 같은 대중 교통을 위한 라우팅 정보가 Transit TravelMode 표시됩니다. 또한 추가 옵션을 위해 logistics TravelMode를 설정하는 방법도 확인하세요.

전송 세부 정보가 포함된 맵 생성

이 예제에서는 대중 교통을 위해 Transit TravelMode를 사용하여 전송 세부 정보가 포함된 맵을 생성하는 방법을 보여줍니다.

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