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 như đượ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 Promises và hoạt động không đồng bộ.
Các phương thức cần có quy trình 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.
Trường dữ liệu địa điểm được định dạng theo kiểu viết con rắn (viết thường chữ cái đầu tiên và thay dấu cách bằng dấu gạch dưới). Các trường dữ liệu về địa điểm được định dạng bằng quy tắc viết hoa chữ cái đầu của từ thứ hai.
Giới hạn ở một nhóm cố định gồm 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 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ã cho thấy mã cần thiết trên mỗi API tương ứng để tạo yêu cầu về Place Details, sau đó sử dụng dữ liệu địa điểm thu được để thêm điểm đánh dấu vào bản đồ.

Places Service (cũ)

Đoạn mã rút gọn sau đây cho thấy cách tạo yêu cầu về Place Details bằ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 địa điểm cần thiết đượ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ã rút gọn sau đây cho thấy cách tạo yêu cầu về thông tin chi tiết của đị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 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