Карта с маркерами. Вывод точек на Google Maps
Поиск по карте - это отдельный режим работы компонента Таблица.
Смотреть пример карты с точками
Как настроить карту
Для показа карты, необходимо сделать следующее:
- Создать таблицу с колонками (все строки).
-
id - идентификатор точки (для возможных операций с точкой).
-
lat - долгота точки.
-
lng - широта точки.
-
description - описание, которое появляется в окне при клике на маркер точки.
-
tooltip - всплывающая подсказка при наведении на точку.
- label и labelClass - задают текстовую метку, которая видна на маркере, пример указания класса 'btn btn-info p-0 mb-5 font-weight-bold text-white' labelClass
- icon - URL к картинке маркера (по умолчанию используется стандартный красный маркер)
-
radius - радиус региона.
- canDrag - если 1, то точки можно перемещать по карте и сохранять в базе новые значения (при перемещении вызывается updateItemField с code=marker, id=id точки и value = "lat||lng")
-
Дополнительно можно добавить следующие столбцы (стилизация точек и регионов)
-
fillColor: '#a0bfeb',
-
fillOpacity: 0.2,
-
strokeColor: '#000000',
-
strokeOpacity: 1,
-
strokeWeight: 1.
-
-
Прописать запрос GetItems
-
MapShowUserLocation bit - показывать пользователя на карте?
-
MapUserImageUrl nvarchar(256) - путь к картинке пользователя.
-
MapShowAllRegions bit - показать все локации обслуживания всех точек.
-
MapShowLocationInRange bit - показать локацию, в которую попадает пользователь
-
-
SELECT 1 (с колонками id int, lat nvarchar(32), lng nvarchar(32), description nvarchar(max), tooltip nvarchar(128), radius int)
-
в SELECT 3 ставим ViewType='map', дополнительные параметры в SELECT 3
-
Карта будет работать только в случае, если вы указали ключ Google API в GetLayout (GeoLocationKey).
-
В description к маркеру можно вставлять сниппеты компонентов (например, Форму). Инициализация компонентов идет по клику на маркере.
- В общем случае моменты с координатами передаем в формате lat||lng||text_address (в UpdateField передается lat||lng)
CREATE PROCEDURE [dbo].[crud_testMap_updateField]
@itemID int,
@field nvarchar(64),
@value nvarchar(max),
@username nvarchar(64)
AS
BEGIN
if(@field = 'marker') begin
declare @lat nvarchar(32), @lng nvarchar(32)
set @lat = [dbo].[str_splitPart](@value, '||', 1 )
set @lng = [dbo].[str_splitPart](@value, '||', 2 )
update tst_addresses
set lat = @lat, lng = @lng
where id = @itemID
end else begin
select 'Невалидный код свойства' Msg, 0 Result
return
end
select '' Msg, 1 Result
END
В SELECT 3 также можно передать параметр mapOptions, в котором устанавливаются настройки карты в виде JSON. Документация по настройкам карты Гугл - https://developers.google.com/maps/documentation/javascript/interaction
Пример настройки:
-- 3 SELECT Дополнительные настройки таблицы
select 'map' ViewType,
0 MapShowUserLocation,
'' MapUserImageUrl,
0 MapShowAllRegions,
0 MapShowLocationInRange,
1 HideTitleCount, ' ' Title,
'{
"center":{"lat": 39.913818, "lng": 116.363625},
"zoom": 4,
"fitBound": false,
"afterMoveMarkerRefreshContainer": "body"
}' MapOptions
Кастомные настройки (которые не относятся к плагину карты Google).
- afterMoveMarkerRefreshContainer - указываем селектор контейнера, который надо обновлять после перемещения точки (например, чтобы обновить какую-то форму или таблицу на странице).
- fitBound - если 1, то карта будет адаптировать zoom и область, чтобы вывести все выбранные точки.
- mapCenter - задает центр карты в виде {"lat": 12.34234, "lng": 43.2321}
Кастомизация иконки маркера на карте
Параметр icon в SELECT 1 GetItems можно задавать 2 способами:
либо просто строка, которой ссылка на URL картинки для маркера,
либо JSON объект с указанием URL и размера:
'{
"url": "/uploads/3.jpg",
"size": 50
}' icon
если icon пустой, то используется значок маркера по умолчанию и размер 20.
Возможные проблемы с картой
Если появляется серый прямоугольник вместо карты и нет ошибок в консоли, это означает, что вам необходимо установить параметры zoom и mapCenter. Пример:
-- SELECT 3
SELECT '{
"zoom":9,
"mapCenter": {"lat":55.760533, "lng": 37.487028}
}' MapOptions
Альтернатива - использовать fitBound=1 (в этом случае карта (ее center и zoom) будет адаптироваться под точки на ней).
Google поиск по нашей документации
- Руководства
- Основа Falcon Space
- Основные компоненты
- Возможности
- Коммуникация с пользователем
- Дизайн, стилизация
- Лендинги
- Универсальный API
- Примеры интеграций
- Каталоги
- Навигация
- Документы
- Дополнительные компоненты Бизнес-процессы. Создание бизнес-процесса в личном кабинете Работа с показателями. Управление метриками на сайте Создание панелей-подсказок для пользователей в личном кабинете Отображение счетчиков в личном кабинете на сайте Работа с HTML блоками. Создание модулей верстки Работа с деревьями (иерархия). Вывод древовидных структур на сайте Добавление лайков, дизлайков, рейтингов, голосования за товары в личном кабинете Интерактивное дерево для отображения иерархических структур Диаграмма Ганта на сайте Доска Канбан Диаграмма Chartbar Карта с маркерами. Вывод точек на Google Maps Карточки Полоски прогресса Временная линия (timeline) для вывода событий на странице Вывод данных в виде графа на сайте Вывод движения заявки по статусам statusbar Интерактивные диаграммы, графики
- Продвижение, SEO
- Системные моменты
- Системное администрирование
- HOWTO
- Таблицы
- Формы
- Загрузка файлов, картинок
- Работа с SQL
- HOWTO JS
- HOWTO Верстка
- Решение проблем
Falcon Space
Это снижение стоимости владения
за счет меньшего количества людей для поддержки и узкого стека разработки. Про снижение стоимости владения продуктом
Это быстрое внесение изменений
по ходу эксплуатации программы. Как создается функционал на платформе
Это простой удобный интерфейс
адаптация под мобильные устройства. Про юзабилити платформы