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 trình bày các bước chính để phát triển ứng dụng tìm cửa hàng tương tác bằng cách sử dụng Google Maps Platform, cụ thể là API JavaScript của Maps và Bộ giao diện người dùng của địa điểm: Thành phần chi tiết về đị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, tự động cập nhật 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 và nhập Bộ công cụ giao diện người dùng của Địa điểm.
Điểm đánh dấu nâng cao – Dùng để hiển thị điểm đánh dấu trên bản đồ.
Bộ công cụ giao diện người dùng của Places – 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 API Maps JavaScript và Bộ công cụ giao diện người dùng của Địa điểm trên dự án của bạn.

Xác minh rằng bạn đã tải API Maps JavaScript và nhập các thư viện cần thiết cho Biểu tượng nâng cao và Bộ công cụ giao diện người dùng của Địa điểm trước khi bắt đầu. Tài liệu này cũng giả định bạn có kiến thức về cách 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 một 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 thực tế, hiển thị các vị trí văn phòng của Google ở Khu vực Vịnh. Phần tử Chi tiết địa điểm sẽ hiển thị cho mỗi 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 lưu trữ thông tin về các cửa hàng hiện có để 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. Đối với 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 (với lat và lng) và một place_id.

Có nhiều cách để truy xuất Mã địa điểm cho 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ục nhập chi tiết về cửa hàng mẫu trong tệp stores.json có thể có dạ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 trữ giờ mở cửa của cửa hàng (bị cắt bớt). Ngoài ra, còn có hai giá trị boolean để giúp mô tả các tính năng tuỳ chỉnh 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 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ó 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 tại giai đoạn này:

hình ảnh

Theo dõi 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 vị trí tương ứng của các điểm đánh dấu đó nằm trong khu vực bản đồ hiển thị (khung nhìn). Điều này liên quan đến việc theo dõi các thay đổi về khung nhìn bản đồ, loại bỏ độ trễ của các sự kiện này, sau đó 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 sẽ 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 sẽ 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);
    };
}

Mã trên là một ví dụ về hàm chống rung. Hàm này nhận một hàm và đối số độ trễ, có thể được thấy được truyền trong trình nghe ở trạng thái rảnh. Độ trễ 300 mili giây là đủ để chờ 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 sẽ thực hiện các 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 giới hạn 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ị các điểm đánh dấu và lưu trữ thông tin chi tiết về cửa hàng trên thanh bên, nếu vị trí cửa hàng nằm trong khung nhìn bản đồ.

Hiển thị thông tin chi tiết phong phú về địa điểm bằ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 nhìn bản đồ. Để nâng cao trải nghiệm này, bạn có thể thêm thông tin chi tiết phong phú về từng cửa hàng, chẳng hạn như hình ảnh, bài đánh giá và thông tin hỗ trợ người khuyết tật 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ể Thành phần thu gọn Thông tin 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 Mã nhận dạng địa điểm tương ứng. Mã này xác định duy nhất vị trí trên Google Maps và là yếu tố 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 các mã địa điểm này trước và lưu trữ các mã này theo từng bản ghi cửa hàng.

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

Khi một cửa hàng được xác định 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 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ã nhận dạng địa điểm được dùng để kiểm soát vị trí 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 vào PlaceDetailsPlaceRequestElement này 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 cần thiết của Bộ giao diện người dùng Place đã đượ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 vào hàm này 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ử này được định cấu hình để hiển thị ảnh địa điểm, điểm xếp hạng bài đá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 khác có sẵn, hãy xem tài liệu về PlaceContentConfigElement để biết tất cả các tuỳ chọn có sẵn.

Phần tử Thông tin chi tiết về địa điểm thu gọn hỗ trợ định 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

Cải thiện trình tìm kiế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 trình tìm cửa hàng. Bây giờ, hãy cân nhắc 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 vào người dùng hơn.

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

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 dữ liệu nhập 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 rồi chọn một gợi ý, hãy lập trình bản đồ để tự động căn giữa vị trí đó, kích hoạt quá trình cập nhật các cửa hàng lân cận. Bạn có thể thực hiện việc này bằng cách 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 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ả trong khu vực hoạt động của bạn.

Phát hiện vị trí

Cung cấp nội dung 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 nhận được quyền truy cập thông tin vị trí của trình duyệt, hệ thống sẽ tự động căn giữa bản đồ theo vị trí của người dùng 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 một 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 thị khoảng cách và đường đi

Sau khi người dùng xác định 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í đượ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 Route 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, tạo sự 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 Nền tảng Google Maps để 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, trực tiếp giải quyết các nhu cầu phổ biến của người dùng.

Kết luận

Hướng dẫn này đã minh hoạ các bước chính để 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 cách sử dụng API JavaScript của Maps, tự động cập nhật các cửa hàng hiển thị dựa trên các thay đổi về khung nhìn và quan trọng là cách hiển thị dữ liệu cửa hàng của riêng bạn theo Bộ giao diện người dùng của Địa điểm. 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 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ú và được chuẩn hoá cho từng vị trí, tạo nền tảng vững chắc cho 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à Bộ công cụ giao diện người dùng của Địa điểm để cung cấp các công cụ mạnh mẽ, dựa trên thành phần nhằm phát triển nhanh chóng 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 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.