Google sử dụng công nghệ AI để dịch nội dung sang ngôn ngữ bạn ưu tiên. Bản dịch bằng AI có thể có lỗi.

Công cụ tìm cửa hàng bằng Places UI Kit

Mục tiêu

Tài liệu này trình bày các bước chính để phát triển một ứng dụng tìm cửa hàng tương tác bằng Google Maps Platform, cụ thể là Maps JavaScript API và Places UI Kit: Thành phần Chi tiết địa điểm. Bạn sẽ tìm hiểu cách tạo bản đồ hiển thị vị trí cửa hàng, cập nhật linh động danh sách các cửa hàng hiển thị và hiển thị thông tin chi tiết về địa điểm cho từng cửa hàng.

Điều kiện tiên quyết

Bạn nên làm quen với những nội dung sau:

Maps JavaScript API – Dùng để hiển thị bản đồ trên trang của bạn và nhập Places UI Kit.
Điểm đánh dấu nâng cao – Dùng để hiển thị điểm đánh dấu trên bản đồ.
Places UI Kit – Dùng để hiển thị thông tin về cửa hàng của bạn trong giao diện người dùng.

Bật Maps JavaScript API và Places UI Kit trong dự án của bạn.

Xác minh rằng bạn đã tải Maps JavaScript API và nhập các thư viện cần thiết cho Dấu đánh dấu nâng cao và Places UI Kit trước khi bắt đầu. Tài liệu này cũng giả định rằng bạn có kiến thức thực tế về phát triển web, bao gồm HTML, CSS và JavaScript.

Thiết lập ban đầu

Bước đầu tiên là thêm bản đồ vào trang. Bản đồ này sẽ được dùng để hiển thị các ghim liên quan đến vị trí cửa hàng của bạn.

Có hai cách để thêm bản đồ vào một trang:

Sử dụng thành phần web HTML gmp-map
Sử dụng JavaScript

Hãy chọn phương thức phù hợp nhất với trường hợp sử dụng của bạn. Cả hai cách triển khai bản đồ đều sẽ hoạt động theo hướng dẫn này.

Tải và hiển thị vị trí cửa hàng

Trong phần này, chúng ta sẽ tải và hiển thị dữ liệu cửa hàng trên bản đồ. Hướng dẫn này giả định rằng bạn có một kho lưu trữ thông tin về các cửa hàng hiện có để lấy dữ liệu. Dữ liệu cửa hàng có thể đến từ nhiều nguồn, chẳng hạn như cơ sở dữ liệu của bạn. Trong ví dụ này, chúng ta giả định một tệp JSON cục bộ (stores.json) có một mảng các đối tượng cửa hàng, mỗi đối tượng đại diện cho một vị trí cửa hàng. Mỗi đối tượng phải chứa ít nhất một name, location (có lat và lng) và một place_id.

Có nhiều cách để truy xuất Mã địa điểm cho các vị trí cửa hàng của bạn nếu bạn chưa có các mã này. Xem tài liệu về Mã địa điểm để biết thêm thông tin.

Mục thông tin chi tiết về cửa hàng trong tệp stores.json có thể có dạng như sau. Có các trường cho Tên, Vị trí (vĩ độ/kinh độ) và Mã địa điểm. Có một đối tượng để lưu giữ giờ mở cửa của cửa hàng (đã cắt bớt). Ngoài ra, còn có hai giá trị Boolean để giúp mô tả các tính năng riêng của vị trí cửa hàng thực tế.

{
  "name": "Example Store Alpha",
  "location": { "lat": 51.51, "lng": -0.12 },
  "place_id": "YOUR_STORE_PLACE_ID",
  "opening_hours": { "Monday": "09:00 - 17:00", "...": "..." },
  "new_store_design": true,
  "indoor_seating": false
}

Trong mã JavaScript, hãy tìm nạp dữ liệu cho các vị trí cửa hàng và hiển thị một ghim trên bản đồ cho mỗi vị trí.

Sau đây là ví dụ về cách thực hiện việc này. Hàm này lấy một đối tượng chứa thông tin chi tiết về các cửa hàng và tạo một điểm đánh dấu dựa trên vị trí của từng cửa hàng.

function displayInitialMarkers(storeLocations) {
    if (!AdvancedMarkerElement || !LatLng || !mapElement) return;
    storeLocations.forEach(store => {
        if (store.location) {
            const marker = new AdvancedMarkerElement({
                position: new LatLng(store.location.lat, store.location.lng),
                title: store.name
            });
            mapElement.appendChild(marker);
        }
    });
}

Sau khi bạn tải các cửa hàng và có ghim đại diện cho vị trí của các cửa hàng đó hiển thị trên bản đồ, hãy tạo một thanh bên bằng HTML và CSS để hiển thị thông tin chi tiết về từng cửa hàng của bạn.

Sau đây là ví dụ về giao diện của công cụ định vị cửa hàng ở giai đoạn này:

hình ảnh

Lắng nghe các thay đổi về khung nhìn bản đồ

Để tối ưu hoá hiệu suất và trải nghiệm người dùng, hãy cập nhật ứng dụng của bạn để chỉ hiển thị điểm đánh dấu và thông tin chi tiết trong thanh bên khi các vị trí tương ứng nằm trong khu vực bản đồ hiển thị (khung nhìn). Quá trình này bao gồm việc theo dõi các thay đổi về khung nhìn bản đồ, loại bỏ các sự kiện này rồi chỉ vẽ lại các điểm đánh dấu cần thiết.

Đính kèm trình nghe sự kiện vào sự kiện rảnh của bản đồ. Sự kiện này kích hoạt sau khi mọi thao tác kéo hoặc thu phóng hoàn tất, cung cấp một khung nhìn ổn định cho các phép tính của bạn.

map.addListener('idle', debounce(updateMarkersInView, 300));

Đoạn mã trên theo dõi sự kiện idle và gọi hàm debounce. Việc sử dụng hàm debounce đảm bảo rằng logic cập nhật điểm đánh dấu chỉ chạy sau khi người dùng ngừng tương tác với bản đồ trong một khoảng thời gian ngắn, giúp cải thiện hiệu suất.

function debounce(func, delay) {
    let timeoutId;
    return function(...args) {
        const context = this;
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
            func.apply(context, args);
        }, delay);
    };
}

Đoạn mã trên là một ví dụ về hàm debounce. Hàm này nhận một hàm và đối số trì hoãn, có thể được truyền vào trình nghe trạng thái rảnh. Độ trễ 300 mili giây là đủ để đợi bản đồ ngừng di chuyển mà không gây ra độ trễ đáng chú ý cho giao diện người dùng. Sau khi hết thời gian chờ này, hàm được truyền sẽ được gọi, trong trường hợp này là updateMarkersInView.

Hàm updateMarkersInView sẽ thực hiện những thao tác sau:

Xoá tất cả điểm đánh dấu hiện có khỏi bản đồ

Kiểm tra xem vị trí của cửa hàng có nằm trong ranh giới bản đồ hiện tại hay không, ví dụ:

if (map.getBounds().contains(storeLatLng)) {
  // logic
}

Trong câu lệnh if ở trên, hãy viết mã để hiển thị điểm đánh dấu và thông tin chi tiết về cửa hàng trên thanh bên, nếu vị trí cửa hàng thực tế nằm trong khung nhìn bản đồ.

Hiển thị thông tin chi tiết về địa điểm bằng Thành phần chi tiết về địa điểm

Ở giai đoạn này, ứng dụng sẽ hiển thị tất cả vị trí cửa hàng và người dùng có thể lọc các vị trí đó dựa trên khung nhìn bản đồ. Để cải thiện điều này, thông tin chi tiết phong phú về từng cửa hàng, chẳng hạn như ảnh, bài đánh giá và thông tin về khả năng hỗ trợ tiếp cận, sẽ được thêm vào bằng Phần tử chi tiết địa điểm. Ví dụ này sử dụng cụ thể Thành phần thu gọn của Chi tiết địa điểm.

Mỗi vị trí cửa hàng trong nguồn dữ liệu phải có một Mã địa điểm tương ứng. Mã nhận dạng này giúp xác định riêng biệt vị trí trên Google Maps và là thông tin cần thiết để tìm nạp thông tin chi tiết về vị trí đó. Thông thường, bạn sẽ lấy trước các Mã địa điểm này và lưu trữ chúng cho từng bản ghi cửa hàng.

Tích hợp Phần tử thu gọn về chi tiết địa điểm vào ứng dụng

Khi một cửa hàng được xác định là nằm trong khung nhìn bản đồ hiện tại và đang được hiển thị trong thanh bên, bạn có thể tạo và chèn một Phần tử thu gọn của Place Details cho cửa hàng đó một cách linh động.

Đối với cửa hàng hiện đang được xử lý, hãy truy xuất Mã địa điểm từ dữ liệu của bạn. Mã địa điểm được dùng để kiểm soát địa điểm mà phần tử sẽ hiển thị.

Trong JavaScript, hãy tạo một thực thể của PlaceDetailsCompactElement một cách linh động. Một PlaceDetailsPlaceRequestElement mới cũng được tạo, Mã địa điểm được truyền đến đó và được thêm vào PlaceDetailsCompactElement. Cuối cùng, hãy sử dụng PlaceContentConfigElement để định cấu hình nội dung mà phần tử sẽ hiển thị.

Hàm sau đây giả định rằng các thư viện Places UI Kit cần thiết đã được nhập và có sẵn trong phạm vi gọi hàm này, đồng thời storeData được truyền đến hàm chứa place_id.

Hàm này sẽ trả về phần tử và mã gọi sẽ chịu trách nhiệm thêm phần tử đó vào DOM.

function createPlaceDetailsCompactElement(storeData) {
    // Create the main details component
    const detailsCompact = new PlaceDetailsCompactElement();
    detailsCompact.setAttribute('orientation', 'vertical'); // Or 'horizontal'

    // Specify the Place ID
    const placeRequest = new PlaceDetailsPlaceRequestElement();
    placeRequest.place = storeData.place_id;
    detailsCompact.appendChild(placeRequest);

    // Configure which content elements to display
    const contentConfig = new PlaceContentConfigElement();
    // For this example, we'll render media, rating, accessibility, and attribution:
    contentConfig.appendChild(new PlaceMediaElement({ lightboxPreferred: true }));
    contentConfig.appendChild(new PlaceRatingElement());
    contentConfig.appendChild(new PlaceAccessibleEntranceIconElement());
    // Configure attribution
    const placeAttribution = new PlaceAttributionElement();
    placeAttribution.setAttribute('light-scheme-color', 'gray');
    placeAttribution.setAttribute('dark-scheme-color', 'gray');
    contentConfig.appendChild(placeAttribution);
    detailsCompact.appendChild(contentConfig);
    // Return the element
    return detailsCompact;
}

Trong mã ví dụ ở trên, phần tử được định cấu hình để hiển thị ảnh về địa điểm, điểm xếp hạng đánh giá và thông tin về khả năng hỗ trợ tiếp cận. Bạn có thể tuỳ chỉnh bằng cách thêm hoặc xoá các phần tử nội dung có sẵn khác. Hãy xem tài liệu PlaceContentConfigElement để biết tất cả các lựa chọn có sẵn.

Thành phần thu gọn Chi tiết địa điểm hỗ trợ việc tạo kiểu thông qua các thuộc tính tuỳ chỉnh CSS. Nhờ đó, bạn có thể điều chỉnh giao diện (màu sắc, phông chữ, v.v.) cho phù hợp với thiết kế của ứng dụng. Áp dụng các thuộc tính tuỳ chỉnh này trong tệp CSS. Hãy xem tài liệu tham khảo về PlaceDetailsCompactElement để biết các thuộc tính CSS được hỗ trợ.

Ví dụ về giao diện của ứng dụng ở giai đoạn này:

hình ảnh

Cải thiện công cụ tìm cửa hàng

Bạn đã xây dựng được nền tảng vững chắc cho ứng dụng tìm cửa hàng của mình. Bây giờ, hãy cân nhắc một số cách để mở rộng chức năng và tạo ra trải nghiệm phong phú hơn, lấy người dùng làm trung tâm.

Thêm tính năng tự động hoàn thành

Cải thiện cách người dùng tìm khu vực để tìm cửa hàng bằng cách tích hợp thông tin đầu vào tìm kiếm với tính năng Tự động hoàn thành địa điểm. Khi người dùng nhập địa chỉ, khu vực lân cận hoặc địa điểm yêu thích và chọn một đề xuất, hãy lập trình bản đồ để tự động căn giữa vào vị trí đó, kích hoạt thông tin cập nhật về các cửa hàng gần đây. Để làm được điều này, hãy thêm một trường nhập dữ liệu và đính kèm chức năng Place Autocomplete vào trường đó. Khi chọn một đề xuất, bản đồ có thể được căn giữa tại điểm đó. Hãy nhớ định cấu hình để thiên về hoặc hạn chế kết quả cho khu vực hoạt động của bạn.

Phát hiện vị trí

Cung cấp thông tin phù hợp ngay lập tức, đặc biệt là cho người dùng thiết bị di động, bằng cách triển khai chức năng phát hiện vị trí địa lý hiện tại của họ. Sau khi được trình duyệt cho phép phát hiện vị trí của người dùng, hãy tự động đặt bản đồ ở giữa vị trí của họ và hiển thị các cửa hàng gần nhất. Người dùng đánh giá cao tính năng Gần tôi này khi tìm kiếm các lựa chọn ngay lập tức. Thêm nút hoặc lời nhắc ban đầu để yêu cầu quyền truy cập thông tin vị trí.

Hiện quãng đường và đường đi

Sau khi người dùng xác định được cửa hàng mà họ quan tâm, hãy cải thiện đáng kể hành trình của họ bằng cách tích hợp Routes API. Đối với mỗi cửa hàng mà bạn liệt kê, hãy tính toán và hiển thị khoảng cách từ vị trí hiện tại của người dùng hoặc từ vị trí được tìm kiếm. Ngoài ra, hãy cung cấp một nút hoặc đường liên kết sử dụng Routes API để tạo tuyến đường từ vị trí của người dùng đến cửa hàng đã chọn. Sau đó, bạn có thể hiển thị tuyến đường này trên bản đồ hoặc liên kết đến Google Maps để đi theo chỉ dẫn, tạo ra một quá trình chuyển đổi liền mạch từ việc tìm cửa hàng đến việc thực sự đến đó.

Bằng cách triển khai các tiện ích này, bạn có thể sử dụng nhiều tính năng hơn của Google Maps Platform để xây dựng một công cụ định vị cửa hàng toàn diện và thuận tiện hơn, đáp ứng trực tiếp các nhu cầu phổ biến của người dùng.

Kết luận

Hướng dẫn này đã trình bày các bước cốt lõi để xây dựng một công cụ tìm cửa hàng tương tác. Bạn đã tìm hiểu cách hiển thị vị trí cửa hàng của riêng mình trên bản đồ bằng Maps JavaScript API, tự động cập nhật các cửa hàng hiển thị dựa trên thay đổi về khung nhìn và đặc biệt là cách hiển thị dữ liệu cửa hàng của riêng bạn phù hợp với Places UI Kit. Bằng cách sử dụng thông tin hiện có về cửa hàng, bao gồm cả Mã địa điểm, với Thành phần chi tiết địa điểm, bạn có thể trình bày thông tin chi tiết phong phú, chuẩn hoá cho từng vị trí của mình, tạo nền tảng vững chắc cho một công cụ định vị cửa hàng thân thiện với người dùng.

Hãy thử Maps JavaScript API và Places UI Kit để cung cấp các công cụ mạnh mẽ, dựa trên thành phần nhằm nhanh chóng phát triển các ứng dụng tinh vi dựa trên vị trí. Bằng cách kết hợp các tính năng này, bạn có thể tạo ra trải nghiệm hấp dẫn và cung cấp nhiều thông tin cho người dùng.

Người đóng góp

Henrik Valve | Kỹ sư DevX

Công cụ tìm cửa hàng bằng Places UI Kit 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.