Di chuyển sang Chi tiết địa điểm mới

API Địa điểm có thể trả về thông tin chi tiết về một địa điểm cụ thể. Trang này giải thích sự khác biệt giữa thông tin chi tiết về địa điểm được sử dụng trong lớp Place (mới) và PlacesService (cũ), đồng thời cung cấp một số đoạn mã để so sánh. Bảng sau đây liệt kê một số điểm khác biệt chính trong việc sử dụng thông tin chi tiết về địa điểm giữa lớp Place và PlacesService:

PlacesService (Cũ) Place (Mới)
getDetails() fetchFields()
PlaceDetailsRequest FetchFieldsRequest
Các phương thức yêu cầu sử dụng lệnh gọi lại để xử lý đối tượng kết quả và phản hồi google.maps.places.PlacesServiceStatus. Sử dụng Lời hứa và hoạt động không đồng bộ.
Các phương thức yêu cầu kiểm tra PlacesServiceStatus. Không cần kiểm tra trạng thái, có thể sử dụng tính năng xử lý lỗi chuẩn.
Trường dữ liệu vị trí được định dạng bằng cách sử dụng kiểu viết thường. Trường dữ liệu vị trí được định dạng bằng cách sử dụng kiểu viết hoa camel.
Chỉ giới hạn ở một nhóm cố định các loại địa điểm và trường dữ liệu địa điểm. Cung cấp nhiều lựa chọn hơn về các loại địa điểm và các trường dữ liệu địa điểm được cập nhật thường xuyên.

So sánh mã

Phần này so sánh hai đoạn mã tương tự nhau để minh hoạ sự khác biệt giữa dịch vụ Địa điểm và lớp Địa điểm. Các đoạn mã cho thấy mã cần thiết trên mỗi API tương ứng để tạo yêu cầu thông tin chi tiết về địa điểm, sau đó sử dụng dữ liệu địa điểm thu được để thêm điểm đánh dấu vào bản đồ.

Dịch vụ Địa điểm (Cũ)

Đoạn mã rút gọn sau đây cho thấy cách tạo yêu cầu thông tin chi tiết về địa điểm bằng PlacesService. Yêu cầu này sử dụng lệnh gọi lại và bao gồm một bước kiểm tra có điều kiện bắt buộc trên PlacesServiceStatus. Các trường dữ liệu địa điểm cần thiết được chỉ định trong phần nội dung yêu cầu.

function getPlaceDetails() {
  // Instantiate the Places Service.
  const service = new google.maps.places.PlacesService(map);

  // Make a request using the Place ID.
  const request = {
    placeId: "ChIJN1t_tDeuEmsRUsoyG83frY4",
    fields: ["name", "formatted_address", "place_id", "geometry"],
  };

  // Request place details.
  service.getDetails(request, (place, status) => {
    // Check whether PlacesServiceStatus is OK.
    if (
      status === google.maps.places.PlacesServiceStatus.OK &&
      place &&
      place.geometry &&
      place.geometry.location
    ) {

      // Log the result.
      console.log(place.name);
      console.log(place.formatted_address);

      // Add a marker for the place.
      const marker = new google.maps.Marker({
        map,
        position: place.geometry.location,
        title: place.name,
      });
    }
  });
}

Tìm hiểu thêm

Lớp địa điểm (Mới)

Đoạn mã rút gọn sau đây cho thấy cách tạo yêu cầu thông tin chi tiết về địa điểm bằng lớp Place. Yêu cầu này không đồng bộ và không bao gồm việc kiểm tra trạng thái (có thể sử dụng tính năng xử lý lỗi tiêu chuẩn). Mã địa điểm được dùng để tạo một thực thể Place mới, dùng để tạo yêu cầu (fetchFields()). Các trường dữ liệu địa điểm cần thiết sẽ không được truyền cho đến khi fetchFields() được gọi, giúp tăng tính linh hoạt. Vì phương thức fetchFields() sử dụng toán tử await nên bạn chỉ có thể sử dụng phương thức này bên trong hàm async.

async function getPlaceDetails() {
  // Use place ID to create a new Place instance.
  const place = new google.maps.places.Place({
    id: "ChIJN5Nz71W3j4ARhx5bwpTQEGg",
    requestedLanguage: "en", // optional
  });

  // Call fetchFields, passing the needed data fields.
  await place.fetchFields({
    fields: ["displayName", "formattedAddress", "location"],
  });

  // Log the result.
  console.log(place.displayName);
  console.log(place.formattedAddress);

  // Add an Advanced Marker.
  const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: place.location,
    title: place.displayName,
  });
}

Tìm hiểu thêm