Xem tuyến đường

Nhà phát triển ở Khu vực kinh tế Châu Âu (EEA)

Nếu địa chỉ thanh toán của bạn ở Khu vực kinh tế Châu Âu, thì kể từ ngày 8 tháng 7 năm 2025, Điều khoản dịch vụ của Google Maps Platform tại EEA sẽ áp dụng cho việc bạn sử dụng Dịch vụ. Chức năng thay đổi tuỳ theo khu vực. Tìm hiểu thêm.

Tuyến đường là một đường đi có thể di chuyển giữa vị trí bắt đầu (hoặc điểm xuất phát) và vị trí kết thúc (hoặc điểm đến). Bạn có thể chọn xem tuyến đường cho nhiều phương thức di chuyển, chẳng hạn như đi bộ, đi xe đạp hoặc các loại xe khác. Bạn cũng có thể yêu cầu thông tin chi tiết về tuyến đường, chẳng hạn như khoảng cách, thời gian ước tính để đi theo tuyến đường, phí cầu đường dự kiến và hướng dẫn từng bước để đi theo tuyến đường.

Xem mã nguồn ví dụ hoàn chỉnh

Mã mẫu sau đây cho biết cách lấy tuyến đường để xem đường lái xe giữa hai vị trí.

TypeScript

// Initialize and add the map.
let map: google.maps.Map;
let mapPolylines: google.maps.Polyline[] = [];
const center = { lat: 37.447646, lng: -122.113878 }; // Palo Alto, CA

// Initialize and add the map.
async function init(): Promise<void> {
    //  Request the needed libraries.
    const [{ Map }, { Place }, { Route }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
        google.maps.importLibrary('routes'),
    ]);

    map = new Map(document.getElementById('map')!, {
        zoom: 12,
        center,
        mapTypeControl: false,
        mapId: 'DEMO_MAP_ID',
    });

    // Use address strings in a directions request.
    const requestWithAddressStrings = {
        origin: '1600 Amphitheatre Parkway, Mountain View, CA',
        destination: '345 Spear Street, San Francisco, CA',
        fields: ['path'],
    };
    console.log({ requestWithAddressStrings });

    // Use Place IDs in a directions request.
    const originPlaceInstance = new Place({
        id: 'ChIJiQHsW0m3j4ARm69rRkrUF3w', // Mountain View, CA
    });

    const destinationPlaceInstance = new Place({
        id: 'ChIJIQBpAG2ahYAR_6128GcTUEo', // San Francisco, CA
    });

    const requestWithPlaceIds: google.maps.routes.ComputeRoutesRequest = {
        origin: originPlaceInstance,
        destination: destinationPlaceInstance,
        fields: ['path'], // Request fields needed to draw polylines.
    };
    console.log({ requestWithPlaceIds });

    // Use lat/lng in a directions request.
    // Mountain View, CA
    const originLatLng = { lat: 37.422, lng: -122.084058 };
    // San Francisco, CA
    const destinationLatLng = { lat: 37.774929, lng: -122.419415 };

    // Define a computeRoutes request.
    const requestWithLatLngs: google.maps.routes.ComputeRoutesRequest = {
        origin: originLatLng,
        destination: destinationLatLng,
        fields: ['path'],
    };
    console.log({ requestWithLatLngs });

    // Use Plus Codes in a directions request.
    const requestWithPlusCodes: google.maps.routes.ComputeRoutesRequest = {
        origin: '849VCWC8+R9', // Mountain View, CA
        destination: 'CRHJ+C3 Stanford, CA 94305, USA', // Stanford, CA
        fields: ['path'],
    };
    console.log({ requestWithPlusCodes });

    // Define a routes request.
    const request: google.maps.routes.ComputeRoutesRequest = {
        origin: 'Mountain View, CA',
        destination: 'San Francisco, CA',
        travelMode: 'DRIVING',
        fields: ['path'], // Request fields needed to draw polylines.
    };

    // Call computeRoutes to get the directions.
    const { routes } = await Route.computeRoutes(request);

    // Use createPolylines to create polylines for the route.
    if (!routes) {
        console.warn('No routes found.');
        return;
    }
    mapPolylines = routes[0].createPolylines();
    // Add polylines to the map.
    mapPolylines.forEach((polyline) => {
        polyline.setMap(map);
    });

    // Create markers to start and end points.
    const markers = await routes[0].createWaypointAdvancedMarkers();
    // Add markers to the map
    markers.forEach((marker) => {
        marker.map = map;
    });

    // Display the raw JSON for the result in the console.
    console.log(`Response:\n ${JSON.stringify(routes, null, 2)}`);

    // Fit the map to the path.
    void fitMapToPath(routes[0].path!);
}

// Helper function to fit the map to the path.
async function fitMapToPath(path: google.maps.LatLngLiteral[]) {
    const { LatLngBounds } = await google.maps.importLibrary('core');
    const bounds = new LatLngBounds();
    path.forEach((point) => {
        bounds.extend(point);
    });
    map.fitBounds(bounds);
}

void init();
index.ts

Lưu ý: Đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

JavaScript

// Initialize and add the map.
let map;
let mapPolylines = [];
const center = { lat: 37.447646, lng: -122.113878 }; // Palo Alto, CA

// Initialize and add the map.
async function init() {
    //  Request the needed libraries.
    const [{ Map }, { Place }, { Route }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
        google.maps.importLibrary('routes'),
    ]);

    map = new Map(document.getElementById('map'), {
        zoom: 12,
        center,
        mapTypeControl: false,
        mapId: 'DEMO_MAP_ID',
    });

    // Use address strings in a directions request.
    const requestWithAddressStrings = {
        origin: '1600 Amphitheatre Parkway, Mountain View, CA',
        destination: '345 Spear Street, San Francisco, CA',
        fields: ['path'],
    };
    console.log({ requestWithAddressStrings });

    // Use Place IDs in a directions request.
    const originPlaceInstance = new Place({
        id: 'ChIJiQHsW0m3j4ARm69rRkrUF3w', // Mountain View, CA
    });

    const destinationPlaceInstance = new Place({
        id: 'ChIJIQBpAG2ahYAR_6128GcTUEo', // San Francisco, CA
    });

    const requestWithPlaceIds = {
        origin: originPlaceInstance,
        destination: destinationPlaceInstance,
        fields: ['path'], // Request fields needed to draw polylines.
    };
    console.log({ requestWithPlaceIds });

    // Use lat/lng in a directions request.
    // Mountain View, CA
    const originLatLng = { lat: 37.422, lng: -122.084058 };
    // San Francisco, CA
    const destinationLatLng = { lat: 37.774929, lng: -122.419415 };

    // Define a computeRoutes request.
    const requestWithLatLngs = {
        origin: originLatLng,
        destination: destinationLatLng,
        fields: ['path'],
    };
    console.log({ requestWithLatLngs });

    // Use Plus Codes in a directions request.
    const requestWithPlusCodes = {
        origin: '849VCWC8+R9', // Mountain View, CA
        destination: 'CRHJ+C3 Stanford, CA 94305, USA', // Stanford, CA
        fields: ['path'],
    };
    console.log({ requestWithPlusCodes });

    // Define a routes request.
    const request = {
        origin: 'Mountain View, CA',
        destination: 'San Francisco, CA',
        travelMode: 'DRIVING',
        fields: ['path'], // Request fields needed to draw polylines.
    };

    // Call computeRoutes to get the directions.
    const { routes } = await Route.computeRoutes(request);

    // Use createPolylines to create polylines for the route.
    if (!routes) {
        console.warn('No routes found.');
        return;
    }
    mapPolylines = routes[0].createPolylines();
    // Add polylines to the map.
    mapPolylines.forEach((polyline) => {
        polyline.setMap(map);
    });

    // Create markers to start and end points.
    const markers = await routes[0].createWaypointAdvancedMarkers();
    // Add markers to the map
    markers.forEach((marker) => {
        marker.map = map;
    });

    // Display the raw JSON for the result in the console.
    console.log(`Response:\n ${JSON.stringify(routes, null, 2)}`);

    // Fit the map to the path.
    void fitMapToPath(routes[0].path);
}

// Helper function to fit the map to the path.
async function fitMapToPath(path) {
    const { LatLngBounds } = await google.maps.importLibrary('core');
    const bounds = new LatLngBounds();
    path.forEach((point) => {
        bounds.extend(point);
    });
    map.fitBounds(bounds);
}

void init();
index.js

CSS

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
    height: 100%;
}

/*
   * Optional: Makes the sample page fill the window.
   */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
style.css

HTML

<html>
    <head>
        <title>Get directions</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>
index.html

Gọi phương thức computeRoutes() để yêu cầu một tuyến đường giữa hai vị trí. Ví dụ sau đây cho thấy cách xác định một yêu cầu, sau đó gọi computeRoutes() để lấy tuyến đường. computeRoutes() là một phương thức tĩnh của lớp Route, vì vậy, hãy gọi trực tiếp Route.computeRoutes(request). Yêu cầu cũng phải đặt thuộc tính fields thành mặt nạ trường phản hồi.

  // Import the Routes library.
  const { Route } = await google.maps.importLibrary('routes');

  // Define a computeRoutes request.
  const request = {
    origin: 'Mountain View, CA',
    destination: 'San Francisco, CA',
    fields: ['path'], // Required: response field mask.
  };

  // Call the computeRoutes() method to get routes.
  const {routes} = await Route.computeRoutes(request);
    

Để vẽ tuyến đường trên bản đồ, hãy gọi createPolylines() trên tuyến đường mà bạn yêu cầu bằng trường path. Xem phần Hiển thị hình nhiều đường trên bản đồ.

Chọn các trường cần trả về

Khi yêu cầu một tuyến đường, bạn phải sử dụng mặt nạ trường để chỉ định thông tin mà phản hồi sẽ trả về. Bạn có thể chỉ định tên của các thuộc tính của lớp Tuyến đường trong mặt nạ trường.

Việc sử dụng mặt nạ trường cũng đảm bảo rằng bạn không yêu cầu dữ liệu không cần thiết, từ đó giúp giảm độ trễ phản hồi và tránh trả về thông tin mà hệ thống của bạn không cần.

Chỉ định danh sách các trường bạn cần bằng cách đặt thuộc tính ComputeRoutesRequest.fields, như trong đoạn mã sau:

TypeScript

// Define a routes request.
const request: google.maps.routes.ComputeRoutesRequest = {
    origin: 'Mountain View, CA',
    destination: 'San Francisco, CA',
    travelMode: 'DRIVING',
    fields: ['path'], // Request fields needed to draw polylines.
};
index.ts

Lưu ý: Đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

JavaScript

// Define a routes request.
const request = {
    origin: 'Mountain View, CA',
    destination: 'San Francisco, CA',
    travelMode: 'DRIVING',
    fields: ['path'], // Request fields needed to draw polylines.
};
index.js

Chỉ định vị trí cho một tuyến đường

Để tính toán một tuyến đường, bạn phải chỉ định ít nhất vị trí của điểm xuất phát và điểm đến của tuyến đường, cũng như mặt nạ trường. Bạn cũng có thể chỉ định các điểm tham chiếu trung gian dọc theo một tuyến đường và sử dụng các điểm tham chiếu để làm những việc khác, chẳng hạn như thêm điểm dừng hoặc điểm đi qua dọc theo một tuyến đường.

Trong ComputeRoutesRequest, bạn có thể chỉ định một vị trí theo bất kỳ cách nào sau đây:

• Địa điểm (ưu tiên)
• Toạ độ vĩ độ/kinh độ
• Chuỗi địa chỉ ("Chicago, IL" hoặc "Darwin, NT, Australia")
• Plus Code

Bạn có thể chỉ định vị trí cho tất cả điểm tham chiếu trong một yêu cầu theo cùng một cách hoặc kết hợp các cách. Ví dụ: bạn có thể sử dụng toạ độ vĩ độ/kinh độ cho điểm tham chiếu xuất phát và sử dụng đối tượng Địa điểm cho điểm tham chiếu đích.

Để đảm bảo hiệu quả và độ chính xác, hãy sử dụng đối tượng Địa điểm thay vì toạ độ vĩ độ/kinh độ hoặc chuỗi địa chỉ. Mã địa điểm là giá trị nhận dạng riêng biệt và cung cấp các lợi ích mã hoá địa lý cho việc định tuyến, chẳng hạn như điểm truy cập và biến lưu lượng truy cập. Các phương thức này giúp tránh những tình huống sau đây có thể xảy ra khi bạn chỉ định vị trí theo cách khác:

• Việc sử dụng toạ độ vĩ độ/kinh độ có thể khiến vị trí được ghim vào đường gần nhất với toạ độ đó. Tuy nhiên, đường đó có thể không phải là điểm vào cơ sở lưu trú hoặc thậm chí không phải là đường dẫn đến điểm đến một cách nhanh chóng hoặc an toàn.
• Trước tiên, các chuỗi địa chỉ phải được Routes API mã hoá địa lý để chuyển đổi thành toạ độ vĩ độ/kinh độ trước khi có thể tính toán tuyến đường. Việc chuyển đổi này có thể ảnh hưởng đến hiệu suất.

Chỉ định một vị trí dưới dạng đối tượng Địa điểm (ưu tiên)

Để chỉ định một vị trí bằng Địa điểm, hãy tạo một thực thể Place mới. Đoạn mã sau đây cho thấy cách tạo các thực thể Place mới cho origin và destination, sau đó sử dụng các thực thể đó trong ComputeRoutesRequest:

TypeScript

// Use Place IDs in a directions request.
const originPlaceInstance = new Place({
    id: 'ChIJiQHsW0m3j4ARm69rRkrUF3w', // Mountain View, CA
});

const destinationPlaceInstance = new Place({
    id: 'ChIJIQBpAG2ahYAR_6128GcTUEo', // San Francisco, CA
});

const requestWithPlaceIds: google.maps.routes.ComputeRoutesRequest = {
    origin: originPlaceInstance,
    destination: destinationPlaceInstance,
    fields: ['path'], // Request fields needed to draw polylines.
};
index.ts

Lưu ý: Đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

JavaScript

// Use Place IDs in a directions request.
const originPlaceInstance = new Place({
    id: 'ChIJiQHsW0m3j4ARm69rRkrUF3w', // Mountain View, CA
});

const destinationPlaceInstance = new Place({
    id: 'ChIJIQBpAG2ahYAR_6128GcTUEo', // San Francisco, CA
});

const requestWithPlaceIds = {
    origin: originPlaceInstance,
    destination: destinationPlaceInstance,
    fields: ['path'], // Request fields needed to draw polylines.
};
index.js

Toạ độ vĩ độ/kinh độ

Để chỉ định một vị trí dưới dạng toạ độ vĩ độ/kinh độ, hãy tạo một thực thể google.maps.LatLngLiteral, google.maps.LatLngAltitude hoặc google.maps.LatLngAltitudeLiteral mới. Đoạn mã sau đây cho thấy cách tạo các thực thể google.maps.LatLngLiteral mới cho origin và destination, sau đó sử dụng các thực thể đó trong computeRoutesRequest:

TypeScript

// Use lat/lng in a directions request.
// Mountain View, CA
const originLatLng = { lat: 37.422, lng: -122.084058 };
// San Francisco, CA
const destinationLatLng = { lat: 37.774929, lng: -122.419415 };

// Define a computeRoutes request.
const requestWithLatLngs: google.maps.routes.ComputeRoutesRequest = {
    origin: originLatLng,
    destination: destinationLatLng,
    fields: ['path'],
};
index.ts

Lưu ý: Đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

JavaScript

// Use lat/lng in a directions request.
// Mountain View, CA
const originLatLng = { lat: 37.422, lng: -122.084058 };
// San Francisco, CA
const destinationLatLng = { lat: 37.774929, lng: -122.419415 };

// Define a computeRoutes request.
const requestWithLatLngs = {
    origin: originLatLng,
    destination: destinationLatLng,
    fields: ['path'],
};
index.js

Chuỗi địa chỉ

Chuỗi địa chỉ là địa chỉ cố định được biểu thị bằng một chuỗi (chẳng hạn như "1600 Amphitheatre Parkway, Mountain View, CA"). Mã hoá địa lý là quá trình chuyển đổi một chuỗi địa chỉ thành toạ độ vĩ độ và kinh độ (chẳng hạn như vĩ độ 37,423021 và kinh độ -122,083739).

Khi bạn truyền một chuỗi địa chỉ làm vị trí của một điểm tham chiếu, thư viện Tuyến đường sẽ mã hoá địa lý chuỗi đó để chuyển đổi thành toạ độ vĩ độ và kinh độ.

Đoạn mã sau đây cho thấy cách tạo ComputeRoutesRequest bằng chuỗi địa chỉ cho origin và destination:

TypeScript

// Use address strings in a directions request.
const requestWithAddressStrings = {
    origin: '1600 Amphitheatre Parkway, Mountain View, CA',
    destination: '345 Spear Street, San Francisco, CA',
    fields: ['path'],
};
index.ts

Lưu ý: Đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

JavaScript

// Use address strings in a directions request.
const requestWithAddressStrings = {
    origin: '1600 Amphitheatre Parkway, Mountain View, CA',
    destination: '345 Spear Street, San Francisco, CA',
    fields: ['path'],
};
index.js

Đặt khu vực cho địa chỉ

Nếu bạn truyền một chuỗi địa chỉ không đầy đủ làm vị trí của một điểm tham chiếu, thì API có thể sử dụng toạ độ vĩ độ/kinh độ được mã hoá địa lý không chính xác. Ví dụ: bạn đưa ra yêu cầu chỉ định "Toledo" làm điểm xuất phát và "Madrid" làm điểm đến cho một tuyến đường lái xe:

// Define a request with an incomplete address string.
const request = {
  origin: 'Toledo',
  destination: 'Madrid',
};
    

Trong ví dụ này, "Toledo" được hiểu là một thành phố ở bang Ohio của Hoa Kỳ, chứ không phải ở Tây Ban Nha. Do đó, yêu cầu sẽ trả về một mảng trống, nghĩa là không có tuyến đường nào.

Bạn có thể định cấu hình API để trả về kết quả thiên về một khu vực cụ thể bằng cách thêm tham số regionCode. Tham số này chỉ định mã khu vực dưới dạng giá trị gồm hai ký tự của ccTLD ("miền cấp cao nhất"). Hầu hết các mã ccTLD đều giống với mã ISO 3166-1, ngoại trừ một số trường hợp ngoại lệ đáng chú ý. Ví dụ: ccTLD của Vương quốc Anh là "uk" (.co.uk) trong khi mã ISO 3166-1 của quốc gia này là "gb" (về mặt kỹ thuật là cho thực thể "Vương quốc Liên hiệp Anh và Bắc Ireland").

Yêu cầu chỉ đường từ "Toledo" đến "Madrid" có chứa tham số regionCode sẽ trả về kết quả phù hợp vì "Toledo" được hiểu là một thành phố ở Tây Ban Nha:

const request = {
  origin: 'Toledo',
  destination: 'Madrid',
  region: 'es', // Specify the region code for Spain.
};
    

Plus Code

Nhiều người không có địa chỉ chính xác, nên họ có thể gặp khó khăn khi nhận hàng. Hoặc những người có địa chỉ có thể muốn nhận hàng tại những vị trí cụ thể hơn, chẳng hạn như lối vào phía sau hoặc bến bốc dỡ hàng.

Plus Codes giống như địa chỉ đường phố cho những người hoặc địa điểm không có địa chỉ thực tế. Thay vì địa chỉ có tên đường và số nhà, Plus Code dựa trên toạ độ vĩ độ/kinh độ và được hiển thị dưới dạng số và chữ cái.

Google đã phát triển Mã cộng để mang lại lợi ích của địa chỉ cho mọi người và mọi thứ. Plus Code là một thông tin tham chiếu vị trí được mã hoá, bắt nguồn từ toạ độ vĩ độ/kinh độ, đại diện cho một khu vực: 1/8000 độ x 1/8000 độ (khoảng 14m x 14m tại xích đạo) hoặc nhỏ hơn. Bạn có thể sử dụng Plus Codes để thay thế cho địa chỉ đường phố ở những nơi không có địa chỉ đường phố hoặc nơi các toà nhà không được đánh số hoặc đường phố không được đặt tên.

Plus Code phải được định dạng dưới dạng mã toàn cầu hoặc mã kết hợp:

• mã toàn cầu bao gồm mã vùng gồm 4 ký tự và mã địa phương gồm 6 ký tự trở lên. Ví dụ: đối với địa chỉ "1600 Amphitheatre Parkway, Mountain View, CA", mã toàn cầu là "849V" và mã địa phương là "CWC8+R9". Sau đó, bạn sử dụng toàn bộ Plus Code gồm 10 ký tự để chỉ định giá trị vị trí là "849VCWC8+R9".
• mã kết hợp bao gồm một mã địa phương có 6 ký tự trở lên kết hợp với một vị trí rõ ràng. Ví dụ: địa chỉ "450 Serra Mall, Stanford, CA 94305, USA" có mã địa phương là "CRHJ+C3". Đối với địa chỉ phức hợp, hãy kết hợp mã địa phương với thành phố, tiểu bang, mã ZIP và phần quốc gia của địa chỉ theo dạng "CRHJ+C3 Stanford, CA 94305, USA".

Đoạn mã sau đây cho thấy cách tính toán tuyến đường bằng cách chỉ định điểm tham chiếu cho điểm xuất phát và điểm đến của tuyến đường bằng Plus Codes:

TypeScript

// Use Plus Codes in a directions request.
const requestWithPlusCodes: google.maps.routes.ComputeRoutesRequest = {
    origin: '849VCWC8+R9', // Mountain View, CA
    destination: 'CRHJ+C3 Stanford, CA 94305, USA', // Stanford, CA
    fields: ['path'],
};
index.ts

Lưu ý: Đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

JavaScript

// Use Plus Codes in a directions request.
const requestWithPlusCodes = {
    origin: '849VCWC8+R9', // Mountain View, CA
    destination: 'CRHJ+C3 Stanford, CA 94305, USA', // Stanford, CA
    fields: ['path'],
};
index.js