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

Tìm nạp các trường

Nếu bạn đã có đối tượng hoặc mã địa điểm Place, hãy sử dụng Place.fetchFields để xem thông tin chi tiết về địa điểm đó. Cung cấp danh sách được phân tách bằng dấu phẩy trường dữ liệu vị trí cần trả về; chỉ định tên trường theo quy ước viết hoa kiểu lạc đà. Sử dụng đối tượng Place được trả về để lấy dữ liệu cho các trường 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 nhật ký một số dữ liệu vào bảng điều khiển.

async function getPlaceDetails(Place) {
    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(Place) {
  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

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

Lưu ý: Mẫu này sử dụng thư viện nguồn mở. Xem README để được hỗ trợ và phản hồi liên quan đến thư viện.

Thành phần 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 sao, ảnh, thông tin chỉ đường và các thông tin khác trong giao diện người dùng được tạo sẵn ở 5 kích thước và định dạng. Đây là một phần của Thư viện thành phần mở rộng, từ Nền tảng Google Maps, 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 đồ tốt hơn và các tính năng định vị nhanh hơn.

Cấu hình Tổng quan về địa điểm

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

Bắt đầu

Để bắt đầu, hãy tải thư viện Thành phần mở rộng bằng npm.

Để có hiệu suất tốt nhất, hãy sử dụng trình quản lý gói và chỉ nhập các thành phần bạn cần. Gói này được liệt kê trên npm là @googlemaps/extended-component-library. Cài đặt bằng:

  npm i @googlemaps/extended-component-library;

Sau đó, hãy nhập mọi thành phần mà bạn dùng trong ứng dụng.

  import '@googlemaps/extended-component-library/place_overview.js';

Sau khi tải thư viện npm, lấy khoá API từ Cloud Console.

  <gmpx-api-loader key="YOUR_API_KEY" solution-channel="GMP_DOCS_placeoverview_v1"></gmpx-api-loader>

Sử dụng thẻ thành phần Tổng quan về địa điểm có Mã địa điểm mà bạn chọn. Đây là ảnh giữ chỗ cho một văn phòng của Google ở Auckland.

  <gmpx-place-overview place="ChIJVVVVnvlHDW0Rwyod-_ddhAw"></gmpx-place-overview>

Có năm biến thể kích thước của thành phần Tổng quan về địa điểm. Thành phần mặc định sử dụng kích thước x-large biến thể. Để có các biến thể kích thước khác, hãy thêm và sửa đổi thuộc tính size.

  <!-- Try setting the size attribute to "x-small", "small", "medium", "large", or "x-large" -->
  <gmpx-place-overview place="ChIJVVVVnvlHDW0Rwyod-_ddhAw" size="small"></gmpx-place-overview>

Để biết thêm chi tiết, hãy xem GitHub hoặc npm. Cách xem các thành phần được dùng trong mã mẫu: hãy xem ví dụ trên GitHub.