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

Trường tìm nạp

Nếu bạn đã có đối tượng Place hoặc mã địa điểm, hãy sử dụng phương thức Place.fetchFields để xem thông tin chi tiết về địa điểm đó. Cung cấp một danh sách được phân tách bằng dấu phẩy các trường dữ liệu địa điểm 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 được yêu cầu.

Ví dụ sau đây sử dụng mã địa điểm để tạo Place mới, gọi Place.fetchFields để yêu cầu các trường displayName và formattedAddress, thêm đ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.

TypeScript

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

JavaScript

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ở. Hãy xem phần README để được hỗ trợ và phản hồi về thư viện này.

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 và ảnh, cùng với chỉ đường và các hành động khác trong một 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 (Extended Component Library) của 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 các tính năng bản đồ và vị trí tốt hơn và nhanh hơn.

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

Sử dụng bộ cấu hình để tạo thành phần Tổng quan về địa điểm tuỳ chỉnh và tạo mã mà bạn có thể thêm vào trang web.

Bắt đầu

Để bắt đầu, hãy tải thư viện Extended Component (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 với tên là @googlemaps/broad-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 sử dụng trong ứng dụng của mình.

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

Sau khi tải thư viện npm, hãy 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 với Mã địa điểm do bạn chọn. Đây là phần giữ chỗ cho một văn phòng của Google tại 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 biến thể kích thước x-large. Để nhận 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 thông tin, hãy xem GitHub hoặc npm. Để xem các thành phần được sử dụng trong mã mẫu, hãy xem trang ví dụ trên GitHub.