Thông tin về địa điểm

Tìm nạp trường

Nếu bạn có đối tượng Place hoặc mã địa điểm hiện có, hãy sử dụng phương thức Place.fetchFields() để biết thông tin chi tiết về địa điểm đó. Cung cấp danh sách trường dữ liệu vị trí được phân tách bằng dấu phẩy để trả về; chỉ định tên trường theo kiểu camel case. Sử dụng đối tượng Place được trả về để lấy dữ liệu cho các trường được yêu cầu.

Ví dụ sau đây sử dụng mã địa điểm để tạo một Place mới, gọi Place.fetchFields() yêu cầu các trường displayName và formattedAddress, thêm một điểm đánh dấu vào bản đồ và ghi lại một số dữ liệu vào bảng điều khiển.

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

    // Call fetchFields, passing the desired 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 AdvancedMarkerElement({
        map,
        position: place.location,
        title: place.displayName,
    });
}
index.ts

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

  // Call fetchFields, passing the desired 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 AdvancedMarkerElement({
    map,
    position: place.location,
    title: place.displayName,
  });
}
index.js

const { Map } = await google.maps.importLibrary("maps");
const { Place } = await google.maps.importLibrary("places");

Sử dụng thành phần Tổng quan về địa điểm

Thành phần Thông tin tổng quan về địa điểm hiển thị thông tin chi tiết về hàng triệu doanh nghiệp, bao gồm giờ mở cửa, bài đánh giá theo thang điểm và ảnh, cùng với thông tin chỉ đường và các thao tác khác trong một giao diện người dùng tạo sẵn ở 5 kích thước và định dạng. Thư viện này là một phần của Thư viện thành phần mở rộng trên Nền tảng Google Maps. Đây là một tập hợp các thành phần web giúp nhà phát triển xây dựng bản đồ và các tính năng vị trí tốt hơn một cách nhanh chóng hơn.

Sử dụng trình định cấu hình Thông tin tổng quan về địa điểm để tạo mã có thể nhúng cho thành phần Thông tin tổng quan về địa điểm tuỳ chỉnh, sau đó xuất mã đó để sử dụng với các khung phổ biến như React và Angular hoặc không sử dụng khung nào cả.