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

Tạo Trình tìm cửa hàng tương tác bằng Bộ công cụ giao diện người dùng của Places

Mục tiêu

Tài liệu này hướng dẫn các bước chính để phát triển một ứng dụng công cụ 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: Phần tử Chi tiết về địa điểm. Bạn sẽ tìm hiểu cách tạo một bản đồ hiển thị vị trí cửa hàng, cập nhật động danh sách các cửa hàng có thể nhìn thấy 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 nắm rõ những điều sau:

Maps JavaScript API – Dùng để hiện bản đồ trên trang của bạn và nhập Places UI Kit.
Advanced Markers (Đ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ác 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.

Hãy xác minh rằng bạn đã tải Maps JavaScript API và nhập các thư viện bắt buộc cho Advanced Markers (Điểm đánh dấu nâng cao) và Places UI Kit (Bộ công cụ giao diện người dùng Places) 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 về phát triển web, bao gồm cả 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 trang:

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

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 với hướng dẫn này.

Bản minh hoạ

Bản minh hoạ này cho thấy ví dụ về cách hoạt động của công cụ tìm cửa hàng, hiển thị các địa điểm văn phòng của Google ở Vùng Vịnh. Phần tử Chi tiết về địa điểm xuất hiện cho từng vị trí, cùng với một số thuộc tính mẫu.

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 của bạn trên bản đồ. Hướng dẫn này giả định rằng bạn có một kho thông tin về các cửa hàng hiện tại để lấy thông tin. 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ó mã này. Hãy xem tài liệu về Mã địa điểm để biết thêm thông tin.

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

{
  "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 của bạn và hiển thị một ghim trên bản đồ cho từng 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à hiển thị các ghim đại diện cho vị trí của các cửa hàng đó 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.

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ị các đ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 vùng bản đồ hiển thị (khung hiển thị). Điều này liên quan đến việc lắng nghe các thay đổi về khung hiển thị bản đồ, loại bỏ các sự kiện này, rồi chỉ vẽ lại những điểm đánh dấu cần thiết.

Đính kèm một trình xử lý sự kiện vào sự kiện ở trạng thái không hoạt động của bản đồ. Sự kiện này sẽ kích hoạt sau khi hoàn tất mọi thao tác xoay hoặc thu phóng, cung cấp một khung hiển thị ổ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 loại bỏ trùng lặp đảm bảo rằng logic cập nhật điểm đánh dấu của bạn 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 loại bỏ trùng lặp. Hàm này nhận một hàm và đối số độ trễ, có thể thấy đượ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 làm tăng độ trễ đáng kể cho giao diện người dùng. Sau khi hết thời gian chờ này, hàm đã truyền sẽ được gọi, trong trường hợp này là updateMarkersInView.

Hàm updateMarkersInView phải 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 phạm vi hiện tại của bản đồ 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ị các điểm đánh dấu và lưu trữ thông tin chi tiết trên thanh bên, nếu vị trí cửa hàng nằm trong khung hiển thị bản đồ.

Hiển thị thông tin chi tiết phong phú về địa điểm bằng cách sử dụng Phần tử thông tin 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 hiển thị bản đồ. Để tăng cường thông tin này, chúng tôi đã thêm 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 hỗ trợ tiếp cận, bằng cách sử dụng Phần tử chi tiết về địa điểm. Ví dụ này sử dụng cụ thể Phần tử nhỏ gọn Chi tiết về địa điểm.

Mỗi vị trí cửa hàng trong nguồn dữ liệu của bạn phải có một Place ID tương ứng. Mã này xác định duy nhấ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ẽ thu thập trước các mã địa điểm này và lưu trữ chúng theo từng bản ghi cửa hàng.

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

Khi xác định được một cửa hàng nằm trong khung hiển thị bản đồ hiện tại và đang được kết xuất trong thanh bên, bạn có thể tạo và chèn một Phần tử thu gọn Chi tiết về địa điểm 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 PlaceDetailsPlaceRequestElement và mã này được nối vào PlaceDetailsCompactElement. Cuối cùng, hãy 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 Place UI Kit cần thiết đã được nhập và có sẵn trong phạm vi mà hàm này được gọi, đồ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 nối 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ử này được định cấu hình để hiển thị ảnh địa điểm, điểm xếp hạng đánh giá và thông tin 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.

Phần tử thu gọn Thông tin chi tiết về địa điểm hỗ trợ việc tạo kiểu thông qua các thuộc tính tuỳ chỉnh CSS. Điều này cho phép bạn đ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 ứng dụng của bạn ở giai đoạn này:

hình ảnh

Nâng cao tính năng tìm cửa hàng

Bạn đã xây dựng một 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 xem xét một số cách để mở rộng chức năng của ứng dụng và tạo ra trải nghiệm phong phú hơn, tập trung hơn vào người dùng.

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

Cải thiện cách người dùng tìm kiếm các khu vực để tìm cửa hàng bằng cách tích hợp một đầ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 một địa chỉ, khu vực lân cận hoặc địa điểm yêu thích rồi 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 quá trình cập nhật các cửa hàng lân cận. Để đạt được điều này, hãy thêm một trường nhập và đính kèm chức năng Tự động hoàn thành địa điểm vào trường đó. Khi bạn chọn một đề xuất, bản đồ có thể được đặt ở 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ả trong 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ó được quyền của trình duyệt để phát hiện vị trí của người dùng, hãy tự động đặt vị trí của họ vào giữa bản đồ và hiển thị các cửa hàng gần nhất. Người dùng rất coi trọng tính năng Ở gần tôi khi tìm kiếm các lựa chọn ngay lập tức. Thêm một nút hoặc câu lệnh ban đầu để yêu cầu quyền truy cập vào vị trí.

Hiện khoảng cách và đường đi

Sau khi người dùng xác định được một 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í mà người dùng 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 một 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 để chỉ đường, tạo ra một quá trình chuyển đổi liền mạch từ việc tìm thấy một cửa hàng đến việc thực sự đến được đó.

Bằng cách triển khai các tiện ích này, bạn có thể sử dụng nhiều chức năng hơn của Nền tảng Google Maps để tạo 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 thường gặp của người dùng.

Kết luận

Hướng dẫn này đã minh hoạ các bước cốt lõi để tạo 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, cập nhật động các cửa hàng có thể nhìn thấy dựa trên các thay đổi về khung hiển thị và quan trọng nhất là cách hiển thị dữ liệu cửa hàng của riêng bạn theo 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 Phần tử thông tin chi tiết về địa điểm, bạn có thể trình bày thông tin chi tiết phong phú, được chuẩn hoá cho từng địa điểm, 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 dùng 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 những tính năng này, bạn có thể tạo ra trải nghiệm hấp dẫn và giàu thông tin cho người dùng.

Người đóng góp

Henrik Valve | Kỹ sư DevX

Tạo Trình tìm cửa hàng tương tác bằng Bộ công cụ giao diện người dùng của Places 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.