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 Nền tảng Google Maps ở EEA sẽ áp dụng cho việc bạn sử dụng Dịch vụ. Chức năng này thay đổi theo khu vực. Tìm hiểu thêm.

Tuyến đường là một đường dẫn có thể đi được giữa vị trí bắt đầu (hoặc điểm khởi hành) và vị trí kết thúc (hoặc điểm đến). Bạn có thể chọn xem đường đi cho nhiều phương tiện giao thông, chẳng hạn như đi bộ, đi xe đạp hoặc các loại xe khác nhau. 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 để di chuyển trên tuyến đường, phí cầu đường dự kiến và hướng dẫn từng bước để di chuyển trên tuyến đường.

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

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

TypeScript

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

// Initialize and add the map.
async function initMap(): Promise<void> {
  //  Request the needed libraries.
  const [{Map}, {Place}, {Route}] = await Promise.all([
    google.maps.importLibrary('maps') as Promise<google.maps.MapsLibrary>,
    google.maps.importLibrary('places') as Promise<google.maps.PlacesLibrary>,
    //@ts-ignore
    google.maps.importLibrary('routes') as Promise<google.maps.Routes>
  ]);

  map = new Map(document.getElementById("map") as HTMLElement, {
    zoom: 12,
    center: 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'],
  };

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

  // Use lat/lng in a directions request.
  // Mountain View, CA
  const originLatLng = {lat: 37.422000, 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'],
  };

  // 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'],
  };

  // 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, fallbackInfo, geocodingResults} = await Route.computeRoutes(request);

  // Use createPolylines to create polylines for the route.
  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.setMap(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.
  fitMapToPath(routes[0].path!);
}

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

initMap();
index.ts

Lưu ý: Hãy đọ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 initMap() {
    //  Request the needed libraries.
    const [{ Map }, { Place }, { Route }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
        //@ts-ignore
        google.maps.importLibrary('routes')
    ]);
    map = new Map(document.getElementById("map"), {
        zoom: 12,
        center: 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'],
    };
    // 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.
    };
    // Use lat/lng in a directions request.
    // Mountain View, CA
    const originLatLng = { lat: 37.422000, 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'],
    };
    // 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'],
    };
    // 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, fallbackInfo, geocodingResults } = await Route.computeRoutes(request);
    // Use createPolylines to create polylines for the route.
    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.setMap(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.
    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);
}
initMap();
index.js

Lưu ý: JavaScript được biên dịch từ đoạn mã TypeScript.

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>
  </head>
  <body>
    <div id="map"></div>
    <!-- prettier-ignore -->
    <script>(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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta"});</script>
  </body>
</html>
index.html

Thử dùng mẫu

JSFiddle.net

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 rồi gọi computeRoutes() để nhận một tuyến đường.

  // 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',
  };

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

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ư minh hoạ trong đoạn mã sau:

TypeScript

// 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.ts

Lưu ý: Hãy đọ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ối thiểu vị trí của điểm bắt đầu và điểm đến của tuyến đường, cũng như một 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 (nên dùng)
• Toạ độ vĩ độ/kinh độ
• Chuỗi địa chỉ ("Chicago, IL" hoặc "Darwin, NT, Úc")
• Mã Plus

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

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

• Việc sử dụng toạ độ vĩ độ/kinh độ có thể khiến vị trí được điều chỉnh cho khớp với con đường gần nhất với những toạ độ đó. Tuy nhiên, đây có thể không phải là điểm truy cập vào cơ sở lưu trú, hoặc thậm chí không phải là con đường dẫn đến đích đến một cách nhanh chóng hoặc an toàn.
• Trước tiên, chuỗi địa chỉ phải được API Tuyến đường mã hoá địa lý để chuyển đổi thành toạ độ vĩ độ/kinh độ thì mới 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 (nên dùng)

Để chỉ định một vị trí bằng Place, 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, rồi 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 = {
  origin: originPlaceInstance,
  destination: destinationPlaceInstance,
  fields: ['path'], // Request fields needed to draw polylines.
}; 
index.ts

Lưu ý: Hãy đọ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 phiên bản 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, rồi 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.422000, 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.ts

Lưu ý: Hãy đọ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.422000, 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ỉ theo nghĩa đen đượ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 đó một cách nội bộ để chuyển đổi thành toạ độ vĩ độ và kinh độ.

Đoạn mã sau đây cho thấy cách tạo một 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 ý: Hãy đọ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ỉ chưa hoàn chỉnh làm vị trí của một điểm đánh dấu, 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à điểm xuất phát và "Madrid" là đ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ố ở tiểu bang Ohio của Hoa Kỳ, chứ không phải ở Tây Ban Nha. Do đó, yêu cầu này sẽ trả về một mảng trống, tức 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 2 ký tự ccTLD ("miền cấp cao nhất"). Hầu hết mã ccTLD đều giống với mã ISO 3166-1, ngoại trừ một số trường hợp đá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 Anh và Bắc Ireland").

Một yêu cầu chỉ đường từ "Toledo" đến "Madrid" có tham số regionCode sẽ trả về kết quả thích 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, điều này có thể khiến họ khó nhận được hàng. Hoặc những người có địa chỉ có thể muốn nhận hàng tại các vị trí cụ thể hơn, chẳng hạn như cửa sau hoặc bến bốc dỡ hàng.

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

Google đã phát triển Plus Codes để mang lại lợi ích của địa chỉ cho mọi người và mọi thứ. Mã cộng là một thông tin tham chiếu được mã hoá về vị trí, bắt nguồn từ toạ độ vĩ độ/kinh độ, đại diện cho một khu vực: 1/8000 độ theo 1/8000 độ (khoảng 14 m x 14 m tại đường xích đạo) hoặc nhỏ hơn. Bạn có thể sử dụng Plus Codes thay 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 có 4 ký tự và mã địa phương có 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ã cục bộ là "CWC8+R9". Sau đó, bạn sử dụng toàn bộ Mã cộng 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ó từ 6 ký tự trở lên kết hợp với một vị trí cụ thể. Ví dụ: địa chỉ "450 Serra Mall, Stanford, CA 94305, Hoa Kỳ" có mã địa phương là "CRHJ+C3". Đối với địa chỉ kết hợp, hãy kết hợp mã địa phương với thành phố, tiểu bang, mã bưu chính và phần quốc gia của địa chỉ ở dạng "CRHJ+C3 Stanford, CA 94305, Hoa Kỳ".

Đoạn mã sau đây cho biết cách tính toán một tuyến đường bằng cách chỉ định một điểm tham chiếu cho điểm bắt đầu và điểm đến của tuyến đường bằng Mã Plus:

TypeScript

// 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.ts

Lưu ý: Hãy đọ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