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

Chọn nền tảng: Android iOS JavaScript Dịch vụ web

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

Nếu bạn đã có mã đối tượng hoặc mã địa điểm Place, 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 danh sách các trường dữ liệu vị trí được phân tách bằng dấu phẩy 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 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.

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 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 và ảnh, thông tin đường đi và các hành động khác trong một giao diện người dùng có sẵn với 5 kích thước và định dạng. Thư viện thành phần mở rộng này nằm trong Thư viện thành phần mở rộng trên 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 tạo các tính năng định vị và bản đồ tốt hơn một cách 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 một thành phần Tổng quan về địa điểm tuỳ chỉnh, sau đó xuất mã này để sử dụng với các khung phổ biến như React và Angular hoặc không có khung nào.

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ó tên npm là @googlemaps/Expand-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, 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 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 biến thể kích thước x-large. Để 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 thông tin chi tiết, hãy truy cập vào GitHub hoặc npm. Để xem các thành phần dùng trong mã mẫu, hãy xem trang ví dụ trên GitHub.