Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Cải thiện tính năng chỉ đường đến sân bay

hình ảnh

Sân bay là các khu phức hợp lớn có nhiều nhà ga và việc điều hướng chính xác là rất quan trọng để đến và khởi hành đúng giờ. Thông thường, Geocoding API của Google Maps sẽ trả về một toạ độ (Vĩ độ/Kinh độ) mà trong hầu hết các trường hợp 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 các vị trí chính xác trong một địa điểm phức hợp lớn hơn, chẳng hạn như các nhà ga cụ thể hoặc điểm đón/trả khách trong Sân bay.

hình ảnh

Sau đây là cách ứng dụng đạt được điều này:

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 địa điểm chính (ví dụ: "Sân bay quốc tế Indira Gandhi") bằng cách nhập vào tính năng Tự động hoàn thành địa điểm của Google , chỉ áp dụng cho Ấn Độ.

Khám phá địa điểm phụ: Sau khi chọn một địa điểm chính, tập lệnh sẽ sử dụng Places API của Google để tìm nạp thông tin chi tiết, quan trọng nhất là mọi "địa điểm phụ" được liệt kê liên kết với địa điểm đó (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).

Liên kết trực quan: Tập lệnh sử dụng Geocoding API để tìm toạ độ của địa điểm chính và các địa điểm phụ.

Sau đó, tập lệnh sẽ hiển thị địa điểm chính và đặt các điểm đánh dấu riêng biệt có thể nhấp (vòng tròn màu xanh dương) trên bản đồ cho từng địa điểm phụ được xác định.

Xác định chính xác: Khi nhấp vào điểm đánh dấu địa điểm 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 InfoWindow cho biết tên và các thông tin chi tiết khác có sẵ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 ngữ cảnh: Bản đồ sẽ 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 (địa điểm chính + địa điểm phụ) đều hiển thị rõ ràng.

Các API của Google Maps Platform trong ứng dụng điều hướng đến sân bay

Tài liệu này giải thích các API chính của Google Maps Platform và các tham số được dùng trong ứng dụng minh hoạ "Điều hướ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 chế độ 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 chạy và hiển thị bản đồ

Nền tảng của ứng dụng là chính 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 đồ tương tác trên trang web.
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, tâm địa lý được đặt thành toạ độ của Delhi ({ lat: 28.461835685621395, lng: 77.05004035761647 }).
- zoom: Đặt mức 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 hỗ trợ 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 tự độ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 các địa điểm có liên quan như sân bay.
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ể. Ở đây, { 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'] được dùng ban đầu để chỉ truy xuất giá trị nhận dạng duy nhất cho địa điểm, tối ưu hoá việc truyề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ý địa điểm phụ

Sau khi chọn một địa điểm trong các đề xuất tự động hoàn thành, ứng dụ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 fetch trực tiếp đến https://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 tên hiển thị, địa chỉ, 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 hơn như sân bay).
Tham số chính trong URL:
1. {placeId}: Giá trị nhận dạng duy nhất của địa điểm đã chọn.
2. fields: Chỉ định các trường dữ liệu chính xác cần truy xuất. Ứng dụng yêu cầu id, displayName, subDestinations, types và 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 nhận subDestinations cho 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 địa điểm phụ

Ứng dụng 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ông tin chi tiết về vị trí. Phần này nêu bật cách tính năng mã hoá địa lý được dùng để lấy thông tin chi tiết về địa điểm phụ.

API được dùng: google.maps.Geocoder (từ Maps JavaScript API) và Geocoding API (thông qua lệnh gọi fetch trực tiếp đến https://maps.googleapis.com/maps/api/geocode/json)
Mục đích:
- google.maps.Geocoder: Dùng để chuyển đổi placeId (lấy từ tính năng Tự động hoàn thành hoặc Places API) thành toạ độ địa lý (lat, lng) và một khung nhìn, 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 địa điểm phụ của địa điểm đó.
- Geocoding API (fetch): 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 nâng cao về vị trí như đường viền toà nhà và điểm điều hướng.
Tham số chính:
- google.maps.Geocoder.geocode():
  - placeId: Mã địa điểm cần mã hoá địa lý.
  - location: Đối tượng LatLng để mã hoá địa lý ngược.
- Lệnh gọi fetch của Geocoding API:
  - 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à đường viền toà nhà và thông tin về lối vào, sau đó được dùng để hiển thị đường viền toà nhà và đ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, 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.AdvancedMarkerElement với 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ành false trong mã được cung cấp, nhưng đây là một phần trong khả năng của điểm đánh dấu) và cho các điểm đánh dấu địa điểm phụ cơ bản như mô tả trong phần 3.
- AdvancedMarkerElement và PinElement: Dùng cho các điểm đánh dấu điểm điều hướng có hình ảnh riêng biệt hơn, cho phép tạo kiểu tuỳ chỉnh cho ghim của điểm đánh dấu.
Tham số chính:
- position: Toạ độ LatLng nơi điểm đánh dấu sẽ được đặt.
- map: Thực thể bản đồ nơi điểm đánh dấu sẽ được hiển thị.
- title: Văn bản hiển thị khi di chuột qua điểm đánh dấu.
- icon: Cho phép dùng các biểu tượng tuỳ chỉnh cho google.maps.Marker (ví dụ: google.maps.SymbolPath.CIRCLE với màu sắc tuỳ chỉnh).
- content: Đối với AdvancedMarkerElement, tham số này cho phép nhúng nội dung HTML tuỳ chỉnh, bao gồm cả PinElement cho 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 toà nhà

Ứng dụng có thể thể hiện trực quan đường viền của các toà nhà.

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 toà nhà (được trả về dưới dạng display_polygon GeoJSON từ extra_computations của Geocoding API).
Tham số chính:
- map: Thực thể bản đồ mà lớp dữ liệu được áp dụng.
- style: Xác định hình thức trực quan 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: Tự động điều chỉnh khung nhìn của bản đồ để 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 địa điểm phụ của địa điểm đó).
Phương thức chính:
- extend(location): Thêm một điểm LatLng và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 được xác định bởi đối tượng LatLngBounds.

Bằng cách kết hợp các API này của Google Maps Platform, ứng dụng sẽ mang đến trải nghiệm toàn diện và 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ý có liên quan như địa điểm phụ và đường viền toà nhà.

Lưu ý về việc 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 khả năng cung cấp dữ liệu (nhà ga sân bay).

Tài nguyên Geocoding API Places API Maps Javascript API

Tác giả:

Cải thiện tính năng chỉ đường đến sân bay Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.