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.

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

Hiển thị thông tin chi tiết về địa điểm chỉ bằng một vài dòng mã bằng cách sử dụng các thành phần web.

Thành phần web là gì?

Các thành phần web cho phép bạn tạo thẻ HTML được đóng gói, đóng gói và tuỳ chỉnh có thể sử dụng được ở mọi nơi trong HTML của ứng dụng web. Các thẻ này được hỗ trợ trong mọi trình duyệt hiện đại và hiển thị cơ chế không phụ thuộc vào khung để đóng gói giao diện người dùng và chức năng.

Thành phần Tổng quan về địa điểm là gì?

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.

Thư viện thành phần mở rộng (Extended Component Library) là gì?

Thư viện thành phần mở rộng (Extended Component Library) của Nền tảng Google Maps 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 các tính năng bản đồ và vị trí tốt hơn nhanh hơn và tốn ít công sức hơn. Công cụ này đóng gói mã nguyên mẫu, các phương pháp hay nhất và thiết kế thích ứng, giúp giảm các giao diện bản đồ phức tạp thành một phần tử HTML duy nhất. Cuối cùng, các thành phần này giúp bạn dễ dàng đọc, tìm hiểu, tuỳ chỉnh và duy trì bản đồ cũng như mã liên quan đến vị trí.

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.