Các phần tử Place Details

Chọn nền tảng: Android iOS JavaScript

Phần tử Thông tin chi tiết về địa điểm và Phần tử Thông tin chi tiết về địa điểm thu gọn là các phần tử HTML hiển thị thông tin chi tiết về một địa điểm:

Phần tử Thông tin chi tiết về địa điểm

Nhấp vào một điểm đánh dấu trên bản đồ để xem thông tin chi tiết về địa điểm trong một Phần tử thông tin chi tiết về địa điểm.

PlaceDetailsElement hỗ trợ nhiều thành phần nội dung, bao gồm cả giờ mở cửa đầy đủ, trang web, số điện thoại, thông tin tóm tắt dựa trên AI (với thông tin tóm tắt biên tập dự phòng), điểm nổi bật theo loại, bài đánh giá, thông tin tóm tắt bài đánh giá dựa trên AI, mã cộng, danh sách tính năng.

Để hiển thị thông tin chi tiết về địa điểm trên bản đồ, hãy thêm phần tử gmp-place-details vào phần tử gmp-map trên trang HTML. Thêm một phần tử con, gmp-place-details-place-request, để chọn địa điểm. Đây có thể là một đối tượng Địa điểm, một mã địa điểm hoặc tên tài nguyên của Địa điểm: 

<gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
  <div class="widget-container" slot="control-inline-start-block-start">
    <gmp-place-details>
      <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
      <gmp-place-all-content></gmp-place-all-content>
    </gmp-place-details>
  </div>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

Định cấu hình nội dung

Bạn có thể kiểm soát nội dung cụ thể về địa điểm mà phần tử gmp-place-details hiển thị bằng cách sử dụng phần tử gmp-place-content-config lồng nhau để chọn và định cấu hình thông tin chi tiết về địa điểm, như trong ví dụ này: 

        <gmp-place-details>
            <gmp-place-details-place-request
                place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
            <gmp-place-content-config>
                <gmp-place-address></gmp-place-address>
                <gmp-place-rating></gmp-place-rating>
                <gmp-place-type></gmp-place-type>
                <gmp-place-price></gmp-place-price>
                <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
                <gmp-place-opening-hours></gmp-place-opening-hours>
                <gmp-place-website></gmp-place-website>
                <gmp-place-phone-number></gmp-place-phone-number>
                <gmp-place-summary></gmp-place-summary>
                <gmp-place-type-specific-highlights></gmp-place-type-specific-highlights>
                <gmp-place-review-summary></gmp-place-review-summary>
                <gmp-place-reviews></gmp-place-reviews>
                <gmp-place-feature-list></gmp-place-feature-list>
            </gmp-place-content-config>
        </gmp-place-details>

Bản thân phần tử gmp-place-content-config chứa một số phần tử nội dung con và mỗi phần tử chọn một chi tiết tương ứng về địa điểm để hiển thị: gmp-place-address chọn địa chỉ của địa điểm, gmp-place-price chọn mức giá của địa điểm, v.v. Các phần tử gmp-place-summary và gmp-place-review-summary cung cấp thông tin tóm tắt dựa trên AI về địa điểm và các bài đánh giá tương ứng. Thứ tự của các phần tử con không liên quan, vì các chi tiết đã chọn luôn được kết xuất theo một thứ tự cố định được xác định trước.

Bạn có thể định cấu hình thêm một số phần tử trong số này bằng cách sử dụng các thuộc tính dành riêng cho nội dung:

  • Phần tử gmp-place-media được dùng để hiển thị một bức ảnh duy nhất và có thuộc tính lightbox-preferred mở bức ảnh trong hộp sáng khi được nhấp vào. Theo mặc định, hộp đèn bị tắt.
  • Phần tử gmp-place-attribution được dùng để hiển thị nguồn của bức ảnh. Các thuộc tính light-scheme-color và dark-scheme-color được dùng để đặt màu cho văn bản ghi nhận quyền tác giả ở chế độ sáng và tối.

Hãy xem tài liệu tham khảo PlaceContentConfigElement để biết thêm thông tin về tất cả các phần tử nội dung được hỗ trợ.

Để đơn giản, bạn có thể thay thế phần tử gmp-place-content-config bằng gmp-place-all-content để hiện tất cả thông tin chi tiết có trong phần tử Chi tiết về địa điểm hoặc bằng gmp-place-standard-content để hiển thị cấu hình tiêu chuẩn.

Định cấu hình giao diện

Phạm vi chiều rộng đề xuất cho phần tử gmp-place-details là 250px – 400px. Chiều rộng nhỏ hơn 250 px có thể không hiển thị đúng cách. Đặt chiều cao cho phù hợp với ứng dụng của bạn. Phần tử Chi tiết về địa điểm được thiết kế để cuộn trong không gian được phân bổ khi cần.

Phần tử gmp-place-details cũng hỗ trợ nhiều thuộc tính CSS tuỳ chỉnh để định cấu hình màu sắc và phông chữ của phần tử. Hãy xem phần Tuỳ chỉnh kiểu cho bộ công cụ giao diện người dùng Places để biết thêm thông tin chi tiết.

Xem ví dụ đầy đủ về đoạn mã

JavaScript

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-place-details');
const placeDetailsRequest = document.querySelector('gmp-place-details-place-request');
const marker = document.querySelector('gmp-advanced-marker');
async function initMap() {
    // Request needed libraries.
    await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);
    // Hide the map type control.
    map.innerMap.setOptions({ mapTypeControl: false });
    // Function to update map and marker based on place details
    const updateMapAndMarker = () => {
        if (placeDetails.place && placeDetails.place.location) {
            map.innerMap.panTo(placeDetails.place.location);
            map.innerMap.setZoom(16); // Set zoom after panning if needed
            marker.position = placeDetails.place.location;
            marker.collisionBehavior =
                google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
            marker.style.display = 'block';
        }
    };
    // Set up map once widget is loaded.
    placeDetails.addEventListener('gmp-load', (event) => {
        updateMapAndMarker();
    });
    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', async (event) => {
        marker.position = null;
        event.stop();
        if (event.placeId) {
            // Fire when the user clicks a POI.
            placeDetailsRequest.place = event.placeId;
            updateMapAndMarker();
        }
        else {
            // Fire when the user clicks the map (not on a POI).
            console.log('No place was selected.');
            marker.style.display = 'none';
        }
    });
}
initMap();
index.js

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    height: 100vh;
    width: 100%;
}

gmp-map {
    flex-grow: 1;
}

.ui-panel {
    width: 400px;
    margin-left: 20px;
    margin-top: 10px;
}

gmp-place-details {
    width: 100%;
    margin: 0;
    border: none;
}
style.css

HTML

<!doctype html>
<html>
    <head>
        <title>Place Details with Google Maps</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="module" src="./index.js" defer></script>
        <!-- prettier-ignore -->
        <script>
      (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
              ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});
    </script>
    </head>
    <body>
        <div class="container">
            <!-- map-id is required to use advanced markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
            <gmp-map zoom="17" map-id="DEMO_MAP_ID">
                <gmp-advanced-marker></gmp-advanced-marker>
            </gmp-map>
            <div class="ui-panel">
                <gmp-place-details>
                    <gmp-place-details-place-request
                        place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
                    <gmp-place-content-config>
                        <gmp-place-address></gmp-place-address>
                        <gmp-place-rating></gmp-place-rating>
                        <gmp-place-type></gmp-place-type>
                        <gmp-place-price></gmp-place-price>
                        <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
                        <gmp-place-opening-hours></gmp-place-opening-hours>
                        <gmp-place-website></gmp-place-website>
                        <gmp-place-phone-number></gmp-place-phone-number>
                        <gmp-place-summary></gmp-place-summary>
                        <gmp-place-type-specific-highlights></gmp-place-type-specific-highlights>
                        <gmp-place-review-summary></gmp-place-review-summary>
                        <gmp-place-reviews></gmp-place-reviews>
                        <gmp-place-feature-list></gmp-place-feature-list>
                    </gmp-place-content-config>
                </gmp-place-details>
            </div>
        </div>
    </body>
</html>
index.html

Dùng thử đoạn nhạc

Phần tử thu gọn của thông tin chi tiết về địa điểm

Nhấp vào một điểm đánh dấu trên bản đồ để xem thông tin chi tiết về địa điểm trong một Phần tử nhỏ gọn của Thông tin chi tiết về địa điểm.

PlaceDetailsCompactElement hiển thị thông tin chi tiết về một địa điểm đã chọn bằng cách sử dụng không gian tối thiểu. Điều này có thể hữu ích trong cửa sổ thông tin làm nổi bật một địa điểm trên bản đồ, trong trải nghiệm mạng xã hội như chia sẻ vị trí trong cuộc trò chuyện, dưới dạng đề xuất để chọn vị trí hiện tại của bạn hoặc trong một bài viết về nội dung nghe nhìn để tham chiếu địa điểm trên Google Maps. PlaceDetailsCompactElement có thể hiển thị tên, địa chỉ, điểm xếp hạng, loại, giá, biểu tượng hỗ trợ tiếp cận, trạng thái mở cửa và một bức ảnh. Bạn có thể hiển thị theo chiều ngang hoặc chiều dọc, tuỳ theo lựa chọn của thuộc tính orientation.

Trong đoạn mã sau, gmp-place-details-compact được định cấu hình với orientation được đặt thành horizontal. Một thuộc tính bổ sung, truncation-preferred, sẽ cắt bớt một số nội dung nhất định để vừa với một dòng thay vì xuống dòng. Phần tử gmp-place-details-compact chứa một phần tử con là gmp-place-details-place-request để chọn địa điểm. Đây có thể là một đối tượng Địa điểm, một mã địa điểm hoặc tên tài nguyên của Địa điểm. 

  <gmp-place-details-compact orientation = "horizontal" truncation-preferred >
    <gmp-place-details-place-request place = "ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
    <gmp-place-all-content></gmp-place-all-content>
  </gmp-place-details-compact>

Định cấu hình nội dung

Bạn có thể kiểm soát nội dung cụ thể về địa điểm mà phần tử gmp-place-details-compact hiển thị bằng cách sử dụng phần tử gmp-place-content-config lồng nhau để chọn và định cấu hình thông tin chi tiết về địa điểm, như minh hoạ trong đoạn mã này: 

<gmp-place-content-config>
    <gmp-place-media lightbox-preferred></gmp-place-media>
    <gmp-place-rating></gmp-place-rating>
    <gmp-place-type></gmp-place-type>
    <gmp-place-price></gmp-place-price>
    <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
    <gmp-place-open-now-status></gmp-place-open-now-status>
    <gmp-place-attribution
        light-scheme-color="gray"
        dark-scheme-color="white"></gmp-place-attribution>
</gmp-place-content-config>
index.html

Chính phần tử gmp-place-content-config chứa một số phần tử nội dung con và mỗi phần tử chọn một thông tin chi tiết tương ứng về địa điểm để hiển thị. Thứ tự của các phần tử con không liên quan, vì các chi tiết đã chọn luôn được kết xuất theo một thứ tự cố định được xác định trước. Bạn có thể định cấu hình thêm một số phần tử trong số này bằng cách sử dụng các thuộc tính dành riêng cho nội dung.

Hãy xem tài liệu tham khảo PlaceContentConfigElement để biết thêm thông tin về tất cả các phần tử nội dung được hỗ trợ.

Để đơn giản, bạn có thể thay thế phần tử gmp-place-content-config bằng gmp-place-all-content để hiện tất cả thông tin chi tiết có trong phần tử Thông tin chi tiết về địa điểm ở dạng thu gọn hoặc bằng gmp-place-standard-content để hiện một cấu hình tiêu chuẩn.

Định cấu hình giao diện

Phạm vi chiều rộng đề xuất cho phần tử gmp-place-details-compact theo hướng dọc là 180 px – 300 px. Chiều rộng nhỏ hơn 160 px có thể không hiển thị chính xác. Không đặt chiều cao cố định.

Phạm vi chiều rộng đề xuất cho phần tử gmp-place-details-compact ở hướng ngang là 180px – 500px. Chiều rộng nhỏ hơn 160 px có thể không hiển thị chính xác. Ở chiều rộng nhỏ hơn 350px, hình thu nhỏ sẽ không xuất hiện. Không đặt chiều cao cố định.

Phần tử gmp-place-details-compact cũng hỗ trợ nhiều thuộc tính CSS tuỳ chỉnh để định cấu hình màu sắc và phông chữ của phần tử. Hãy xem phần Tuỳ chỉnh kiểu cho bộ công cụ giao diện người dùng Places để biết thêm thông tin chi tiết.

Xin lưu ý rằng nếu bạn thêm phần tử Place Details Compact vào một cửa sổ thông tin, thì bạn phải áp dụng kiểu tuỳ chỉnh trực tiếp cho phần tử gmp-place-details-compact. Điều này là do cửa sổ thông tin là một phần của DOM bóng của bản đồ, nên các kiểu CSS bên ngoài sẽ không được áp dụng. 

<gmp-place-details-compact
    orientation="horizontal"
    truncation-preferred
    style="
        width: 400px;
        padding: 0;
        margin: 0;
        border: none;
        background-color: transparent;
        color-scheme: light;
    ">
    <gmp-place-details-place-request
        place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
index.html

Xem ví dụ đầy đủ về mã

Ví dụ này minh hoạ cách thêm PlaceDetailsCompactElement vào bản đồ theo phương thức lập trình bằng cách sử dụng InfoWindow và AdvancedMarkerElement.

JavaScript

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-place-details-compact');
const placeDetailsRequest = document.querySelector('gmp-place-details-place-request');
const marker = document.querySelector('gmp-advanced-marker');
async function initMap() {
    // Request needed libraries.
    Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);
    const { InfoWindow } = (await google.maps.importLibrary('maps'));
    await window.customElements.whenDefined('gmp-map');
    // Set the inner map options.
    map.innerMap.setOptions({
        mapTypeControl: false,
        streetViewControl: false,
    });
    await window.customElements.whenDefined('gmp-advanced-marker');
    marker.collisionBehavior =
        google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
    const infoWindow = new InfoWindow();
    infoWindow.addListener('close', () => {
        marker.position = null;
    });
    const showInfoWindow = () => {
        if (infoWindow.isOpen)
            return;
        infoWindow.setContent(placeDetails);
        infoWindow.open({ anchor: marker });
    };
    placeDetails.addEventListener('gmp-load', (event) => {
        // For the initial load case, with no user click, we fall back to the place's location, and ensure the map has a center set and the InfoWindow is show.
        // (The clicked POI LatLng will be a more natural marker position, when available.)
        if (!map.center) {
            map.center = marker.position = placeDetails.place.location;
            showInfoWindow();
        }
    });
    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', async (event) => {
        event.stop();
        if (event.placeId) {
            // When the user clicks a POI.
            marker.position = event.latLng;
            placeDetailsRequest.place = event.placeId;
            showInfoWindow();
        }
        else {
            // When the user clicks the map (not on a POI).
            marker.position = null;
            placeDetailsRequest.place = null;
            console.log('No place was selected.');
        }
    });
}
initMap();
index.js

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    height: 100vh;
    width: 100%;
}

gmp-map {
    flex-grow: 1;
}
style.css

HTML

<!doctype html>
<html>
    <head>
        <title>Place Details Compact with Google Maps</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="module" src="./index.js" defer></script>
        <!-- prettier-ignore -->
        <script>
      (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
              ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});
    </script>
    </head>
    <body>
        <div class="container">
            <!-- map-id is required to use Advanced Markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
            <gmp-map zoom="17" map-id="DEMO_MAP_ID">
                <gmp-advanced-marker></gmp-advanced-marker>
            </gmp-map>
        </div>
        <!--
        The gmp-place-details-compact element is styled inline because it is
        conditionally rendered and moved into the info window, which is
        part of the map's shadow DOM.
        -->
        <gmp-place-details-compact
            orientation="horizontal"
            truncation-preferred
            style="
                width: 400px;
                padding: 0;
                margin: 0;
                border: none;
                background-color: transparent;
                color-scheme: light;
            ">
            <gmp-place-details-place-request
                place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
            <gmp-place-content-config>
                <gmp-place-media lightbox-preferred></gmp-place-media>
                <gmp-place-rating></gmp-place-rating>
                <gmp-place-type></gmp-place-type>
                <gmp-place-price></gmp-place-price>
                <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
                <gmp-place-open-now-status></gmp-place-open-now-status>
                <gmp-place-attribution
                    light-scheme-color="gray"
                    dark-scheme-color="white"></gmp-place-attribution>
            </gmp-place-content-config>
        </gmp-place-details-compact>
    </body>
</html>
index.html

Dùng thử đoạn nhạc