Карта с маркерами. Вывод точек на Google Maps

Поиск по карте - это отдельный режим работы компонента Таблица.
Смотреть пример карты с точками


Как настроить карту

Для показа карты, необходимо сделать следующее: 

  1. Создать таблицу с колонками (все строки).
    1. id - идентификатор точки (для возможных операций с точкой).
    2. lat - долгота точки.
    3. lng - широта точки. 
    4. description - описание, которое появляется в окне при клике на маркер точки.
    5. tooltip - всплывающая подсказка при наведении на точку. 
    6. label и labelClass - задают текстовую метку, которая видна на маркере, пример указания класса 'btn btn-info p-0 mb-5 font-weight-bold text-white' labelClass
    7. icon - URL к картинке маркера (по умолчанию используется стандартный красный маркер)
    8. radius - радиус региона. 
    9. canDrag - если 1, то точки можно перемещать по карте и сохранять в базе новые значения (при перемещении вызывается updateItemField с code=marker, id=id точки и value = "lat||lng")
    10. Дополнительно можно добавить следующие столбцы (стилизация точек и регионов) 
      1. fillColor: '#a0bfeb',
      2. fillOpacity: 0.2,
      3. strokeColor: '#000000',
      4. strokeOpacity: 1,
      5. strokeWeight: 1.
  2. Прописать запрос GetItems
    1. MapShowUserLocation bit - показывать пользователя на карте? 
    2. MapUserImageUrl nvarchar(256) - путь к картинке пользователя.
    3. MapShowAllRegions bit - показать все локации обслуживания всех точек.
    4. MapShowLocationInRange bit - показать локацию, в которую попадает пользователь
    1.   SELECT 1 (с колонками id int, lat nvarchar(32), lng nvarchar(32), description nvarchar(max), tooltip nvarchar(128), radius int)
    2. в SELECT 3 ставим ViewType='map', дополнительные параметры в SELECT 3 
Примечание: 
  1. Карта будет работать только в случае, если вы указали ключ Google API в GetLayout (GeoLocationKey).
  2. В description к маркеру можно вставлять сниппеты компонентов (например, Форму). Инициализация компонентов идет по клику на маркере.
  3. В общем случае моменты с координатами передаем в формате lat||lng||text_address (в UpdateField передается lat||lng)
 Если точки можно перемещать, то также реализуем процедуру UpdateField

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) будет адаптироваться под точки на ней). 

Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

Google поиск по нашей документации

Falcon Space

Это снижение стоимости владения

за счет меньшего количества людей для поддержки и узкого стека разработки. Про снижение стоимости владения продуктом

Это быстрое внесение изменений

по ходу эксплуатации программы. Как создается функционал на платформе

Это простой удобный интерфейс

адаптация под мобильные устройства. Про юзабилити платформы

Нужна бесплатная консультация?
Получить оценку проекта
Создайте концепцию проекта на основе нашего шаблона и получите оценку проекта в виде КП.
Демо-сайт решений
Базисные решения, которые можно гибко адаптировать под себя: менять внешний вид, бизнес-логику и даже структуру базы данных.