Цель
В этом документе описываются основные этапы разработки интерактивного приложения для поиска магазинов с использованием платформы Google Карт, в частности, API JavaScript для Maps и элемента Places UI Kit: Place Details . Вы узнаете, как создать карту с отображением местоположений магазинов, динамически обновлять список видимых магазинов и отображать подробную информацию о каждом магазине.
Предпосылки
Рекомендуется ознакомиться со следующим:
- Maps JavaScript API — используется для отображения карты на вашей странице и для импорта Places UI Kit.
- Расширенные маркеры — используются для отображения маркеров на карте.
- Places UI Kit — используется для отображения информации о ваших магазинах в пользовательском интерфейсе.
Включите Maps JavaScript API и Places UI Kit в своем проекте.
Прежде чем начать, убедитесь, что вы загрузили Maps JavaScript API и импортировали необходимые библиотеки для Advanced Markers and Places UI Kit . Этот документ также предполагает наличие у вас практических навыков веб-разработки, включая HTML, CSS и JavaScript.
Начальная настройка
Первый шаг — добавить на страницу карту. На ней будут отображаться метки, указывающие местоположение ваших магазинов.
Добавить карту на страницу можно двумя способами:
- Использование HTML-веб-компонента gmp-map
- Использование JavaScript
Выберите метод, который лучше всего подходит для вашего случая. Оба способа реализации карты совместимы с этим руководством.
Демо
В этой демонстрации показан пример поиска магазинов в действии, отображающий адреса офисов Google в районе залива Сан-Франциско. Для каждого офиса отображается элемент «Сведения о месте» вместе с некоторыми примерами атрибутов.
Загрузка и отображение местоположений магазинов
В этом разделе мы загрузим и отобразим данные о вашем магазине на карте. В данном руководстве предполагается, что у вас есть хранилище информации о ваших существующих магазинах, из которого можно извлечь данные. Данные о вашем магазине могут поступать из различных источников, например, из базы данных. В этом примере мы используем локальный JSON-файл ( stores.json ) с массивом объектов магазина, каждый из которых представляет одно местоположение. Каждый объект должен содержать как минимум name , location (с координатами lat и lng ) и place_id .
Если у вас ещё нет идентификаторов мест (Place ID) для ваших магазинов, их можно получить несколькими способами. Подробнее см. в документации по идентификаторам мест (Place ID) .
Пример записи информации о магазине в файле stores.json может выглядеть следующим образом. В нём есть поля «Название», «Местоположение» (широта/долгота) и «Идентификатор места». Имеется объект для хранения часов работы магазина (в усечённом виде). Также есть два булевых значения для описания дополнительных характеристик местоположения магазина.
{
"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
}
В коде JavaScript извлеките данные о местоположении ваших магазинов и отобразите на карте метку для каждого из них.
Вот пример того, как это сделать: эта функция принимает объект, содержащий подробную информацию о магазинах, и создаёт маркер на основе местоположения каждого из них.
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);
}
});
}
После того как вы загрузили свои магазины и отметите их местоположение на карте, создайте боковую панель с помощью HTML и CSS для отображения информации о ваших отдельных магазинах.
Пример того, как ваш локатор магазинов может выглядеть на данном этапе, выглядит следующим образом:
Следите за изменениями в области просмотра карты
Для оптимизации производительности и удобства использования обновите приложение так, чтобы маркеры и информация отображались на боковой панели только тогда, когда их местоположение находится в пределах видимой области карты (области просмотра). Это включает в себя отслеживание изменений области просмотра карты, обработку этих событий и последующую перерисовку только необходимых маркеров.
Добавьте прослушиватель событий к событию ожидания карты. Это событие срабатывает после завершения любых операций панорамирования или масштабирования, обеспечивая стабильную область просмотра для ваших вычислений.
map.addListener('idle', debounce(updateMarkersInView, 300));
Приведённый выше фрагмент кода отслеживает событие idle и вызывает функцию debounce . Использование функции устранения дребезга гарантирует, что логика обновления маркера будет запускаться только после того, как пользователь перестанет взаимодействовать с картой на короткий промежуток времени, что повышает производительность.
function debounce(func, delay) {
let timeoutId;
return function(...args) {
const context = this;
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func.apply(context, args);
}, delay);
};
}
Приведённый выше код — пример функции устранения дребезга. Она принимает функцию и аргумент задержки, которые можно увидеть переданными в обработчике событий ожидания. Задержка в 300 мс достаточна для ожидания остановки карты, не добавляя заметной задержки в пользовательский интерфейс. По истечении этого времени вызывается переданная функция, в данном случае updateMarkersInView .
Функция updateMarkersInView должна выполнять следующие действия:
Удалить все существующие маркеры с карты
Проверьте, попадает ли местоположение магазина в границы текущей карты, например:
if (map.getBounds().contains(storeLatLng)) {
// logic
}
В операторе if выше напишите код для отображения маркеров и сведений о магазине на боковой панели, если местоположение магазина попадает в область просмотра карты.
Отображение подробной информации о месте с помощью элемента «Сведения о месте»
На этом этапе приложение отображает все местоположения магазинов, и пользователи могут фильтровать их на карте. Для улучшения этого эффекта с помощью элемента Place Details добавляется подробная информация о каждом магазине, такая как фотографии, отзывы и информация о доступности. В этом примере используется компактный элемент Place Details .
Каждому магазину в вашем источнике данных должен быть присвоен соответствующий идентификатор Place ID . Этот идентификатор уникально идентифицирует местоположение на Google Картах и необходим для получения информации о нём. Обычно эти идентификаторы Place ID получаются заранее и сохраняются для каждой записи о магазине.
Интеграция компактного элемента Place Details в приложение
Если магазин находится в пределах текущей области просмотра карты и отображается на боковой панели, вы можете динамически создать и вставить для него компактный элемент сведений о месте.
Для текущего обрабатываемого магазина извлеките из данных идентификатор места (Place ID). Этот идентификатор используется для управления местом, в котором будет отображаться элемент.
В JavaScript динамически создайте экземпляр PlaceDetailsCompactElement . Также создаётся новый элемент PlaceDetailsPlaceRequestElement , которому передаётся идентификатор места, и он добавляется к PlaceDetailsCompactElement . Наконец, используйте PlaceContentConfigElement для настройки содержимого, которое будет отображать элемент.
Следующая функция предполагает, что необходимые библиотеки Place UI Kit импортированы и доступны в области, где вызывается эта функция, а storeData , переданный в функцию, содержит place_id .
Эта функция вернет элемент, а вызывающий код будет отвечать за добавление его в 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;
}
В примере кода выше элемент настроен на отображение фотографий места, рейтинга отзывов и информации о доступности. Это можно настроить, добавив или удалив другие доступные элементы контента. Все доступные параметры см. в документации PlaceContentConfigElement .
Компактный элемент Place Details поддерживает стилизацию с помощью настраиваемых свойств CSS. Это позволяет настроить его внешний вид (цвета, шрифты и т. д.) в соответствии с дизайном вашего приложения. Примените эти настраиваемые свойства в CSS-файле. Поддерживаемые свойства CSS см. в справочной документации по PlaceDetailsCompactElement .
Пример того, как может выглядеть ваше заявление на данном этапе:
Улучшить поиск магазинов
Вы создали прочную основу для своего приложения для поиска магазинов. Теперь рассмотрите несколько способов расширить его функциональность и сделать интерфейс ещё более насыщенным и ориентированным на пользователя.
Добавить автозаполнение
Улучшите поиск областей для поиска магазинов, интегрировав функцию автозаполнения мест (Place Autocomplete) . Когда пользователи вводят адрес, район или объект интереса и выбирают предложенный вариант, запрограммируйте карту так, чтобы она автоматически центрировалась на этом месте, запуская обновление списка ближайших магазинов. Для этого добавьте поле ввода и подключите к нему функцию автозаполнения мест (Place Autocomplete). При выборе предложенного варианта карта может центрироваться на этой точке. Не забудьте настроить её так, чтобы результаты были смещены или ограничены областью вашего присутствия.
Определить местоположение
Обеспечьте мгновенную релевантность, особенно для мобильных пользователей, благодаря функции определения их текущего географического местоположения . После получения разрешения браузера на определение местоположения автоматически центрируйте карту по их местоположению и отображайте ближайшие магазины. Пользователи высоко ценят функцию « Рядом со мной» при поиске вариантов быстрого доступа. Добавьте кнопку или начальное уведомление для запроса доступа к местоположению.
Показать расстояние и направление
Как только пользователь определит интересующий его магазин, значительно упростите его маршрут, интегрировав API маршрутов . Для каждого указанного вами магазина рассчитайте и отобразите расстояние от текущего местоположения пользователя или от места, выбранного в поиске. Кроме того, добавьте кнопку или ссылку, которая использует API маршрутов для построения маршрута от местоположения пользователя до выбранного магазина. Затем вы можете отобразить этот маршрут на карте или добавить ссылку на Google Карты для навигации, обеспечив плавный переход от поиска магазина к фактическому пути к нему.
Внедрив эти расширения, вы сможете использовать больше возможностей платформы Google Maps для создания более комплексного и удобного инструмента поиска магазинов, который будет отвечать потребностям обычных пользователей.
Заключение
В этом руководстве продемонстрированы основные этапы создания интерактивного поисковика магазинов. Вы узнали, как отображать местоположение своих магазинов на карте с помощью Maps JavaScript API, динамически обновлять видимые магазины в зависимости от изменений в области просмотра и, что особенно важно, как отображать данные о своих магазинах в соответствии с Places UI Kit. Используя существующую информацию о магазинах, включая идентификаторы мест, с помощью элемента Place Details (Сведения о местах), вы можете представить подробную стандартизированную информацию о каждом из своих магазинов, создав надежную основу для удобного поиска магазинов.
Попробуйте Maps JavaScript API и Places UI Kit , которые предлагают мощные компоненты для быстрой разработки сложных геолокационных приложений. Объединяя эти функции, вы сможете создавать увлекательные и информативные приложения для своих пользователей.
Авторы
Хенрик Валв | Инженер DevX