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

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

Places API 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 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 một 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 Promise và hoạt động không đồng bộ.
Các phương thức yêu cầu phải có chế độ kiểm tra PlacesServiceStatus. Không cần kiểm tra trạng thái bắt buộc, có thể sử dụng quy trình xử lý lỗi tiêu chuẩn. Tìm hiểu thêm.
Các trường dữ liệu về địa điểm được định dạng bằng snake case. Các trường dữ liệu địa điểm được định dạng bằng quy tắc viết hoa chữ cái đầu của từ (camel case).
Chỉ giới hạn ở một nhóm cố định gồm các loại địa điểm và các 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 về địa điểm được cập nhật thường xuyên.

So sánh mã

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

Places Service (Cũ)

Đoạn mã sau đây cho thấy cách đưa ra yêu cầu chi tiết về địa điểm bằng cách sử dụng PlacesService. Yêu cầu này sử dụng một lệnh gọi lại và bao gồm một bước kiểm tra điều kiện bắt buộc trên PlacesServiceStatus. Các trường dữ liệu cần thiết về địa điểm được chỉ định trong 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ã sau đây cho thấy cách đưa ra yêu cầu chi tiết về địa điểm bằng cách sử dụng lớp Place. Yêu cầu này là không đồng bộ và không bao gồm quy trình kiểm tra trạng thái (bạn có thể sử dụng quy trình 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 để đưa ra 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, điều này mang lại tính linh hoạt cao hơn. Vì phương thức fetchFields() sử dụng toán tử await nên bạn chỉ có thể 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