Sân bay là những khu phức hợp lớn có nhiều nhà ga và việc điều hướng chính xác là yếu tố quan trọng để đến và đi đúng giờ. Google Maps Geocoding API thường sẽ trả về một toạ độ (Vĩ độ/Kinh độ). Trong hầu hết các trường hợp, toạ độ này sẽ là tâm của khu phức hợp sân bay lớn. Ứng dụng này là một công cụ tương tác được thiết kế riêng để giúp người dùng xác định và hình dung vị trí chính xác trong một địa điểm phức tạp hơn như các nhà ga cụ thể hoặc điểm đón/trả khách trong sân bay.
Sau đây là cách tính năng này đạt được mục tiêu:
Tìm kiếm sân bay/địa điểm: Người dùng bắt đầu bằng cách tìm kiếm một vị trí chính (ví dụ: "Sân bay Quốc tế Indira Gandhi") bằng cách sử dụng đầu vào Google Places Autocomplete (chỉ dành cho Ấn Độ).
Khám phá vị trí phụ: Sau khi bạn chọn một vị trí chính, tập lệnh sẽ dùng Google Places API để tìm nạp thông tin chi tiết, đặc biệt là mọi "địa điểm phụ" được liệt kê có liên quan đến vị trí đó (chẳng hạn như Nhà ga 1, Nhà ga 3, các cổng cụ thể, v.v., nếu có trong dữ liệu của Google).
Lập bản đồ trực quan: Tập lệnh này sử dụng Geocoding API để tìm toạ độ của vị trí chính và các điểm đến phụ.
Sau đó, ứng dụng sẽ hiển thị vị trí chính và đặt các điểm đánh dấu riêng biệt có thể nhấp vào (vòng tròn màu xanh dương) trên bản đồ cho từng điểm đến phụ được xác định.
Xác định chính xác: Khi nhấp vào một điểm đánh dấu đích đến phụ, điểm đánh dấu đó sẽ được làm nổi bật (chuyển sang màu xanh lục) và mở một cửa sổ thông tin cho biết tên và các thông tin chi tiết khác có sẵn (chẳng hạn như địa chỉ hoặc loại), cho phép người dùng xác nhận rằng họ đã chọn đúng điểm cụ thể.
Chế độ xem theo bối cảnh: Bản đồ tự động điều chỉnh chế độ xem (fitBounds) để xác minh rằng tất cả các điểm đánh dấu có liên quan (vị trí chính + điểm đến phụ) đều hiển thị rõ ràng.
Các API của Nền tảng Google Maps trong Ứng dụng chỉ đường tại sân bay
Tài liệu này giải thích các API chính của Nền tảng Google Maps và các tham số được dùng trong ứng dụng minh hoạ "Navigate to Airport" (Chỉ đường đến sân bay) được cung cấp. Ứng dụng này tận dụng một số dịch vụ để cung cấp thông tin hiển thị bản đồ, tìm kiếm địa điểm, thông tin chi tiết về địa điểm và thông tin chi tiết nâng cao về vị trí.
1. Khởi tạo và hiển thị bản đồ
Nền tảng của ứng dụng chính là bản đồ tương tác.
- API được dùng:
google.maps.Map(từ Maps JavaScript API) - Mục đích: Tạo và hiển thị bản đồ có tính tương tác trên trang web.
- Các tham số chính:
center: Xác định tâm địa lý ban đầu của bản đồ. Trong ứng dụng này, ban đầu, giá trị này được đặt thành toạ độ của Delhi ({ lat: 28.461835685621395, lng: 77.05004035761647 }).zoom: Đặt cấp độ thu phóng ban đầu của bản đồ.DEFAULT_ZOOM_LEVEL(15) được dùng cho chế độ xem cận cảnh.mapId: Giá trị nhận dạng duy nhất cho một kiểu bản đồ được định cấu hình trong Google Cloud Console.
2. Tìm kiếm địa điểm và tự động hoàn thành
Chức năng thanh tìm kiếm được cung cấp bởi Places API.
- API được dùng:
google.maps.places.Autocomplete(từ Thư viện địa điểm của Maps JavaScript API) - Mục đích: Cung cấp tính năng hoàn thành văn bản dự đoán cho các cụm từ tìm kiếm địa lý khi người dùng nhập, đề xuất những địa điểm có liên quan như sân bay.
- Các tham số chính:
input: Phần tử đầu vào HTML (#search-input) nơi người dùng nhập cụm từ tìm kiếm.componentRestrictions: Lọc kết quả tìm kiếm theo một quốc gia cụ thể. Trong đó,{ country: 'in' }giới hạn kết quả ở Ấn Độ.fields: Chỉ định các trường dữ liệu sẽ được trả về cho địa điểm đã chọn.['place_id']ban đầu chỉ được dùng để truy xuất mã nhận dạng duy nhất cho địa điểm, giúp tối ưu hoá quá trình chuyển dữ liệu.
- Cách sử dụng tính năng Tự động hoàn thành
// Initialize Autocomplete
const autocomplete = new google.maps.places.Autocomplete(input, {
componentRestrictions: { country: 'in' },
fields: ['place_id'],
});
// Add listener to the Autocomplete
autocomplete.addListener('place_changed', async () => {
const place = autocomplete.getPlace();
if (!place.place_id) {
return;
}
// Once a place is selected, fetch details
await getPlaceDetails(place.place_id);
});
3. Truy xuất thông tin chi tiết về địa điểm và xử lý các điểm đến phụ
Sau khi bạn chọn một địa điểm trong các đề xuất tự động hoàn thành, hệ thống sẽ tìm nạp thông tin chi tiết đầy đủ hơn.
- API được dùng: Places API (thông qua lệnh gọi
fetchtrực tiếp đếnhttps://places.googleapis.com/v1/places/{placeId}) - Mục đích: Để truy xuất thông tin chi tiết phong phú về một địa điểm cụ thể, bao gồm cả tên hiển thị, địa chỉ, các loại và quan trọng nhất là
subDestinations(ví dụ: các nhà ga riêng lẻ hoặc các khu vực quan trọng trong một khu phức hợp lớn như sân bay). - Các tham số chính trong URL:
{placeId}: Giá trị nhận dạng duy nhất của địa điểm đã chọn.fields: Chỉ định chính xác các trường dữ liệu cần truy xuất. Ứng dụng yêu cầuid,displayName,subDestinations,typesvàformattedAddress. Điều này rất quan trọng để kiểm soát chi phí và chỉ nhận dữ liệu cần thiết.
- Cách lấy
subDestinationscho một vị trí
async function getPlaceDetails(placeId) {
// Construct the URL for the Places API (v1) details endpoint
// The 'fields' parameter is crucial for requesting subDestinations
const url = `https://places.googleapis.com/v1/places/${placeId}?key=YOUR_API_KEY&fields=id,displayName,subDestinations,types,formattedAddress`;
const response = await fetch(url);
const data = await response.json();
// Accessing subDestinations from the Places API response
if (data.subDestinations && data.subDestinations.length > 0) {
for (const subDestination of data.subDestinations) {
// Each subDestination object contains an 'id' and 'displayName'
console.log(`Sub-destination ID: ${subDestination.id}`);
console.log(`Sub-destination Name: ${subDestination.displayName?.text}`);
// This subDestination.id is then used in a geocoding call (as shown in section 4)
}
}
}
**Handling `subDestinations`:** When the Places API returns
`subDestinations`, the application initiates a process for each one:
1. **Geocoding:** It uses the `google.maps.Geocoder` to convert
each `subDestination.id` into its precise geographical coordinates
(`lat`, `lng`).
1. **Marker Placement:** A distinct marker is added to the map for
each sub-destination. These markers are styled with a blue circle icon
to differentiate them.
1. **Map Bounds Adjustment:** The `google.maps.LatLngBounds` object
is used to dynamically expand the map's view to encompass all retrieved
sub-destinations, verifying they are all visible within the current map
frame.
1. **Interactive Information Window:** A `click` listener is
attached to each sub-destination marker. When clicked, the marker's
icon changes to green, and an `InfoWindow` appears, displaying the
sub-destination's name, address, and types. This provides immediate,
detailed context to the user.
4. Mã hoá địa lý và mã hoá địa lý ngược: Tìm nạp thông tin chi tiết cho các điểm đến phụ
Ứng dụng này sử dụng tính năng mã hoá địa lý cho 2 mục đích chính: chuyển đổi mã địa điểm thành toạ độ và chuyển đổi toạ độ trở lại thành thông tin chi tiết về vị trí. Phần này đặc biệt nêu bật cách sử dụng tính năng mã hoá địa lý để nhận thông tin chi tiết về các điểm đến phụ.
- API được dùng:
google.maps.Geocoder(từ Maps JavaScript API) và Geocoding API (thông qua lệnh gọifetchtrực tiếp đếnhttps://maps.googleapis.com/maps/api/geocode/json) - Mục đích:
google.maps.Geocoder: Dùng để chuyển đổiplaceId(lấy từ API Autocomplete hoặc Places) thành toạ độ địa lý (lat,lng) và một khung hiển thị, cho phép bản đồ căn giữa và thu phóng chính xác vào địa điểm đã chọn và các điểm đến phụ của địa điểm đó.- Geocoding API (
fetch): Được dùng để mã hoá địa lý ngược (chuyển đổi vĩ độ và kinh độ thành địa chỉ mà con người có thể đọc được) và để truy xuất dữ liệu vị trí nâng cao như đường viền toà nhà và điểm điều hướng.
- Các tham số chính:
google.maps.Geocoder.geocode():placeId: Mã địa lý của mã địa điểm.location: Đối tượngLatLngđể mã hoá địa lý ngược.
- Lệnh gọi Geocoding API
fetch:latlng: Toạ độ vĩ độ và kinh độ để mã hoá địa lý ngược.extra_computations=BUILDING_AND_ENTRANCES: Tham số quan trọng này yêu cầu dữ liệu bổ sung, cụ thể là thông tin về dấu vết và lối vào của toà nhà. Sau đó, dữ liệu này được dùng để hiển thị đường viền của toà nhà và các điểm điều hướng.
Cách sử dụng mã nhận dạng subDestination để tìm nạp thêm thông tin chi tiết (ví dụ: vị trí, địa chỉ được định dạng, các loại)
function geocodeAndAddMarker(subDestination, bounds) {
return new Promise((resolve, reject) => {
const geocoder = new google.maps.Geocoder();
// Using the subDestination.id to geocode and get location details
geocoder.geocode({ placeId: subDestination.id }, (results, status) => {
if (status === "OK" && results[0]) {
const location = results[0].geometry.location;
const displayName = subDestination.displayName?.text || "Sub-destination";
const formattedAddress = results[0].formatted_address; // Further detail from Geocoding
const types = results[0].types; // Further detail from Geocoding
const marker = new google.maps.Marker({
map: map,
position: location,
title: displayName,
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: 'blue',
fillOpacity: 0.6,
strokeWeight: 0,
scale: 8
}
});
marker.addListener('click', () => {
marker.setIcon({
path: google.maps.SymbolPath.CIRCLE,
fillColor: 'green',
fillOpacity: 0.6,
strokeWeight: 0,
scale: 8
});
const infowindow = new google.maps.InfoWindow({
content: `<b>${displayName}</b><br><p>Address: ${formattedAddress}</p><p>Types: ${types.join(', ')}</p>`,
});
infowindow.open(map, marker);
});
bounds.extend(location);
resolve(true);
} else {
reject(new Error(`Geocoding failed for placeId: ${subDestination.id}`));
}
});
});
}
5. Hiển thị điểm đánh dấu
Điểm đánh dấu được dùng để làm nổi bật các vị trí cụ thể trên bản đồ.
- API được dùng:
google.maps.Marker(từ Maps JavaScript API) vàgoogle.maps.marker.AdvancedMarkerElementcógoogle.maps.marker.PinElement(từ Thư viện điểm đánh dấu của Maps JavaScript API) - Mục đích:
google.maps.Marker: Dùng cho điểm đánh dấu có thể kéo ban đầu (mặc dùdraggableđược đặt thànhfalsetrong mã được cung cấp, nhưng đây là một phần trong chức năng của điểm đánh dấu) và cho các điểm đánh dấu cơ bản của điểm đến phụ như mô tả trong phần 3.AdvancedMarkerElementvàPinElement: Dùng cho các điểm đánh dấu điểm điều hướng dễ phân biệt hơn về mặt thị giác, cho phép tạo kiểu tuỳ chỉnh cho ghim của điểm đánh dấu.
- Các tham số chính:
position: Toạ độLatLngnơi điểm đánh dấu sẽ được đặt.map: Thực thể bản đồ mà điểm đánh dấu sẽ xuất hiện.title: Văn bản xuất hiện khi di chuột lên điểm đánh dấu.icon: Cho phép dùng biểu tượng tuỳ chỉnh chogoogle.maps.Marker(ví dụ:google.maps.SymbolPath.CIRCLEcó màu tuỳ chỉnh).content: Đối vớiAdvancedMarkerElement, điều này cho phép nhúng nội dung HTML tuỳ chỉnh, bao gồm cảPinElementcho các ghim được tạo kiểu sẵn.- Tham số
PinElement:background,borderColor,glyphColor,scaleđể tuỳ chỉnh hình ảnh.
6. Hiển thị đường viền của toà nhà
Ứng dụng có thể biểu thị dấu vết của các toà nhà một cách trực quan.
- API được dùng:
google.maps.Data(từ Maps JavaScript API) - Mục đích: Để hiển thị dữ liệu địa lý, chẳng hạn như đường viền của toà nhà (được trả về dưới dạng
display_polygonGeoJSON từextra_computationscủa Geocoding API). - Các tham số chính:
map: Thực thể bản đồ mà lớp dữ liệu được áp dụng.style: Xác định giao diện của các đối tượng GeoJSON (ví dụ:strokeColor,fillColor,fillOpacity).addGeoJson(): Phương thức thêm dữ liệu GeoJSON vào lớp.
7. Ranh giới và mức thu phóng của bản đồ
xác minh rằng chế độ xem bản đồ bao gồm tất cả các vị trí có liên quan.
- API được dùng:
google.maps.LatLngBounds(từ Maps JavaScript API) - Mục đích: Để điều chỉnh linh hoạt khung hiển thị của bản đồ cho phù hợp với một tập hợp các điểm địa lý (ví dụ: địa điểm chính và tất cả các đích đến phụ của địa điểm đó).
- Các phương thức chính:
extend(location): Thêm một điểmLatLngvào ranh giới, mở rộng ranh giới nếu cần.fitBounds(bounds): Điều chỉnh tâm và mức thu phóng của bản đồ để hiển thị toàn bộ khu vực do đối tượngLatLngBoundsxác định.
Bằng cách kết hợp các API này của Nền tảng Google Maps, ứng dụng sẽ mang đến trải nghiệm toàn diện và mang tính tương tác để tìm kiếm địa điểm, xem thông tin chi tiết về địa điểm và hình dung thông tin địa lý liên quan như điểm đến phụ và đường viền của toà nhà.
Những điều cần cân nhắc khi triển khai Xin lưu ý rằng tính năng này không hoạt động ở tất cả các khu vực sân bay và tuỳ thuộc vào tính sẵn có của dữ liệu (nhà ga sân bay).
Tài nguyên Geocoding API Places API Maps JavaScript API
Tác giả: