Trang này được dịch bởi Cloud Translation API.

Places UI Kit là gì và bạn có thể sử dụng bộ công cụ này như thế nào để xây dựng các giải pháp hấp dẫn?

Giới thiệu

Đối với hàng triệu người dùng trên toàn cầu, Google Maps là nguồn thông tin chính xác và mới nhất về các địa điểm. Cơ sở dữ liệu phong phú của Google với hơn 250 triệu địa điểm trên toàn thế giới, bao gồm cả bài đánh giá, ảnh và điểm xếp hạng của người dùng, mang đến mức độ chi tiết và độ tin cậy chưa từng có. Để cung cấp dữ liệu mới và chính xác, chúng tôi thực hiện 100 triệu nội dung cập nhật cho bản đồ mỗi ngày.

Places UI Kit là một thư viện thành phần có sẵn và tiết kiệm chi phí, được hỗ trợ bởi thông tin phong phú của Google Maps về các địa điểm. Nhờ đó, bạn có thể tích hợp trải nghiệm Địa điểm quen thuộc và đáng tin cậy của Google vào các trường hợp sử dụng giao diện người dùng trên bản đồ mà bạn chọn.

Thành phần

Places UI Kit cung cấp một bộ gồm các thành phần giao diện người dùng riêng lẻ mà bạn có thể sử dụng độc lập hoặc cùng nhau để tạo ra trải nghiệm liền mạch về Địa điểm.

Thông tin chi tiết về địa điểm: Thành phần này hiển thị thông tin chi tiết về một địa điểm, chẳng hạn như tên, địa chỉ, số điện thoại, trang web, giờ mở cửa và bài đánh giá của người dùng.
Tìm kiếm địa điểm: Thành phần này hiển thị danh sách các địa điểm lân cận theo danh mục hoặc thông qua tìm kiếm bằng văn bản tự do.
Tính năng tự động hoàn thành cơ bản cho địa điểm: Thành phần này tạo một trường nhập văn bản, trình bày danh sách thả xuống gồm các địa điểm được dự đoán khớp với nội dung đầu vào.

Lợi ích chính của Places UI Kit

Dễ sử dụng: Tích hợp trải nghiệm người dùng đáng tin cậy của Google cho Địa điểm vào ứng dụng của bạn với mã tối thiểu.
Sử dụng trên mọi bản đồ: Lần đầu tiên, bạn có thể sử dụng nội dung về Địa điểm trên bản đồ không phải của Google.
Giao diện người dùng quen thuộc: Các thành phần này cung cấp một giao diện người dùng nhất quán với trải nghiệm trên Google Maps, giúp người dùng dễ dàng sử dụng.
Tuỳ chỉnh: Places UI Kit cung cấp nhiều lựa chọn tuỳ chỉnh hình ảnh mà không mất thêm phí. Bạn có thể sử dụng nhiều chế độ cài đặt và thuộc tính CSS tuỳ chỉnh để định cấu hình các phần tử hiển thị.
Tiết kiệm chi phí: Places UI Kit có thể là một giải pháp tiết kiệm chi phí hơn so với việc sử dụng trực tiếp Places API.

Các trường hợp sử dụng trong thực tế

Bạn có thể dùng Places UI Kit trong nhiều ứng dụng để cải thiện trải nghiệm người dùng.

Ứng dụng khám phá địa phương: Ứng dụng "những việc cần làm" có thể dùng thành phần Tìm kiếm địa điểm để cho thấy danh sách các nhà hàng, quán cà phê hoặc điểm tham quan ở gần. Khi người dùng chọn một địa điểm trong danh sách, bạn có thể dùng thành phần Thông tin chi tiết về địa điểm để hiện thêm thông tin về vị trí đó.
Ứng dụng lập kế hoạch du lịch: Ứng dụng du lịch có thể sử dụng tính năng Tìm kiếm địa điểm để cho phép người dùng tìm kiếm khách sạn hoặc địa điểm yêu thích ở một thành phố cụ thể. Sau đó, thành phần Chi tiết về địa điểm có thể hiển thị ảnh, điểm xếp hạng và bài đánh giá cho từng vị trí để giúp bạn lên kế hoạch.
Cổng thông tin tìm kiếm bất động sản và tài sản: Ứng dụng bất động sản có thể sử dụng thành phần Tìm kiếm địa điểm để cho thấy nhiều danh mục địa điểm lân cận nhằm giúp người mua hoặc người thuê nhà tiềm năng hiểu rõ lối sống phù hợp với khu dân cư trước khi họ lên lịch xem nhà.
Ứng dụng nhắn tin và mạng xã hội: Ứng dụng nhắn tin và mạng xã hội có thể sử dụng tính năng Tìm kiếm địa điểm để tìm kiếm và đề xuất các địa điểm ở gần nhằm giúp người dùng dễ dàng tìm được địa điểm gặp mặt. Bạn có thể dùng thành phần Chi tiết về địa điểm để cho thấy thông tin chi tiết về địa điểm khi người dùng chia sẻ địa điểm. Khi sử dụng nút Google Maps được tạo sẵn, người dùng có thể dễ dàng và chính xác khám phá thêm các địa điểm và thông tin du lịch trên Google Maps.

Tuỳ chỉnh

Bạn có thể tuỳ chỉnh mức độ phong phú của nội dung và kiểu của các thành phần trong Places UI Kit cho phù hợp với nhu cầu của mình.

Việc sử dụng các thuộc tính CSS tuỳ chỉnh (ví dụ: các thuộc tính CSS cho Thành phần Thông tin chi tiết về địa điểm) cho phép bạn điều chỉnh giao diện của các thành phần cho phù hợp với thiết kế của ứng dụng. Bạn có thể tuỳ chỉnh màu sắc, phông chữ và các khía cạnh trực quan khác. Bạn cần tuân thủ các yêu cầu về việc ghi nhận quyền tác giả khi sửa đổi hình ảnh. Ví dụ: bạn có thể thay đổi màu chính dùng cho các đường liên kết và số lượng bài đánh giá bằng thuộc tính CSS --gmp-mat-color-primary.

Bạn có thể kiểm soát nội dung cụ thể về địa điểm được hiển thị bằng cách sử dụng một phần tử gmp-place-content-config lồng nhau để chọn và định cấu hình nội dung, hoặc chỉ cần sử dụng gmp-place-all-content để hiện tất cả nội dung có sẵn.

Một công cụ tuỳ chỉnh có trong tài liệu sẽ giúp bạn hình dung các cấu hình kiểu khác nhau.

Hướng dẫn triển khai

Places UI Kit có trong Maps JavaScript và Places SDK dành cho Android và iOS.

Bắt đầu

Để bắt đầu sử dụng Places UI Kit, bạn cần làm theo các bước sau:

Thiết lập dự án Google Cloud: Bạn cần có một dự án Cloud có tài khoản thanh toán để sử dụng Places UI Kit.
Bật Places UI Kit: Bạn phải bật Places UI Kit cho dự án của mình.
Lấy khoá API: Bạn cần có khoá API để xác thực các yêu cầu.

Để biết thêm thông tin cụ thể về nền tảng, hãy xem hướng dẫn bắt đầu sử dụng Places UI Kit cho JavaScript, Android và iOS.

Ví dụ về cách triển khai

Sau đây là ví dụ về cách triển khai tính năng Tìm kiếm địa điểm và Chi tiết về địa điểm bằng bản đồ JavaScript động. Người dùng có thể tìm kiếm các địa điểm lân cận dựa trên văn bản tự do. Khi bạn nhấp vào một địa điểm trong danh sách kết quả tìm kiếm, thành phần Chi tiết về địa điểm sẽ xuất hiện trên bản đồ động.

Sau đây là các đoạn mã. Bạn có thể tìm thấy bản minh hoạ và mã hoàn chỉnh trên kho lưu trữ GitHub này.

Trước khi bắt đầu, hãy đảm bảo bạn đã hoàn tất các bước Bắt đầu ở trên có liên quan đến JavaScript.

Tải các thư viện bắt buộc trong HTML.

<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: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

Trong HTML, hãy thêm một vùng chứa bản đồ, trường nhập văn bản và một nút tìm kiếm. Vùng chứa bản đồ này sẽ chứa các bản đồ động được tạo bằng JavaScript. Hộp nhập cho phép người dùng nhập cụm từ tìm kiếm.

<div id="map-container"></div>
<div class="controls">
    <input type="text" class="query-input" />
    <button class="search-button">Search</button>
</div>

Thêm thành phần Tìm kiếm địa điểm. Thành phần Tìm kiếm địa điểm cung cấp bố cục ngang và dọc. Trong ví dụ này, chúng ta sẽ sử dụng bố cục ngang. Thuộc tính "có thể chọn" cho phép người dùng nhấp vào mục trong danh sách kết quả tìm kiếm (sự kiện gmp-select sẽ được kích hoạt khi người dùng nhấp vào).

Trong phần tử gmp-place-search, chúng ta sẽ thêm 2 phần tử con:

gmp-place-all-content dùng để hiện tất cả nội dung có sẵn
gmp-place-text-search-request được dùng để định cấu hình phần tử Tìm kiếm địa điểm.

Trong ví dụ này, chúng ta sẽ thiết lập cấu hình bằng JavaScript

<div class="list-container">
    <gmp-place-search orientation="horizontal" selectable>
         <gmp-place-all-content></gmp-place-all-content>  
         <gmp-place-text-search-request></gmp-place-text-search-request>
    </gmp-place-search>
</div>

Tiếp theo, hãy thêm thành phần Thông tin chi tiết về địa điểm. Thành phần này có trong bố cục thu gọn và bố cục đầy đủ, mỗi bố cục đều hỗ trợ hướng dọc và hướng ngang. Ví dụ này sử dụng bố cục ngang thu gọn. Giống như thành phần Tìm kiếm địa điểm, chúng ta sẽ thêm 2 phần tử con:

gmp-place-all-content cho biết đang hiển thị tất cả nội dung có sẵn
gmp-place-details-place-request dùng để chọn một địa điểm.

Trong ví dụ này, chúng ta sẽ đặt vị trí trong JavaScript

<div id="details-container">
     <gmp-place-details-compact orientation="horizontal">
        <gmp-place-details-place-request></gmp-place-details-place-request> 
        <gmp-place-all-content></gmp-place-all-content>
    </gmp-place-details-compact> 
</div>

Trong JavaScript, hãy nhập các thư viện mà chúng ta cần cho ví dụ này. Thư viện Địa điểm nhập thư viện Places UI Kit cho JavaScript.

const {Map} = await google.maps.importLibrary("maps");
await google.maps.importLibrary("places");
({AdvancedMarkerElement} = await google.maps.importLibrary("marker"));
({LatLngBounds, LatLng} = await google.maps.importLibrary("core"));

Tạo bản đồ động.

const mapContainer = document.getElementById("map-container");
const mapOptions = {
    center: {lat: 37.422, lng: -122.085},
    zoom: 12 
};
const gMap = new Map(mapContainer, mapOptions);

Thêm một trình nghe lượt nhấp vào nút tìm kiếm để bắt đầu tìm kiếm địa điểm. Khi kết quả tìm kiếm tải, hãy tạo điểm đánh dấu cho từng địa điểm và thêm trình nghe lượt nhấp vào điểm đánh dấu đó. Sau đó, khi bạn nhấp vào một điểm đánh dấu, hệ thống sẽ yêu cầu và hiển thị Thông tin chi tiết tương ứng về địa điểm.

Khi tìm thấy các địa điểm và phần tử Tìm kiếm địa điểm tải, thuộc tính địa điểm của phần tử Tìm kiếm địa điểm sẽ được điền sẵn bằng một mảng kết quả. Mỗi kết quả là một đối tượng địa điểm chứa mã địa điểm, toạ độ và khung hiển thị của địa điểm đó. Để tìm nạp thông tin chi tiết, hãy truyền Mã địa điểm hoặc toàn bộ đối tượng địa điểm đến phần tử Chi tiết về địa điểm.

const queryInput = document.querySelector(".query-input");
const searchButton = document.querySelector(".search-button");
const placeSearch = document.querySelector("gmp-place-search");
const placeSearchQuery = document.querySelector("gmp-place-text-search-request");
const placeDetails = document.querySelector("gmp-place-details-compact");
const placeRequest = document.querySelector("gmp-place-details-place-request");

placeDetailsPopup = new AdvancedMarkerElement({
    map: null,
    content: placeDetails,
    zIndex: 1
});

searchButton.addEventListener("click", searchPlaces);

function searchPlaces(){    
    if (queryInput.value.trim()) {
        placeSearchQuery.textQuery = queryInput.value.trim();
        placeSearchQuery.locationBias = gMap.getBounds();
        placeSearch.addEventListener('gmp-load', addMarkers, { once: true });
    }
}

async function addMarkers(){
    const bounds = new LatLngBounds();
    placeSearch.places.forEach((place) => {
        let marker = new AdvancedMarkerElement({
            map: gMap,
            position: place.location
        });
        bounds.extend(place.location);
        marker.addListener('click',(event) => {
            placeRequest.place = place;
            placeDetails.style.display = 'block';
            placeDetailsPopup.position = place.location;
            placeDetailsPopup.map = gMap;
            gMap.fitBounds(place.viewport, {top: 200, left: 100});
        });
        gMap.setCenter(bounds.getCenter());
        gMap.fitBounds(bounds);
    });
}

Nhớ xem bản minh hoạ và mã hoàn chỉnh trên kho lưu trữ GitHub này.

Các nguồn tài nguyên giúp bạn xây dựng

Người đóng góp

Tác giả chính:

Teresa Qin | Kỹ sư giải pháp của Nền tảng Google Maps

Places UI Kit là gì và bạn có thể sử dụng bộ công cụ này như thế nào để xây dựng các giải pháp hấp dẫn? Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.