GoogleMaps#

GoogleMaps - контрол, который позволяет работать с картами и сервисами Google, используя Google Maps Javascript API. На карте можно создавать маркеры, отображать маршруты по заданным координатам, а также рисовать трек по заданной коллекции точек.

Свойства#

height#

тип	значение по умолчанию	допустимые значения
string	200px

Высота контрола

width#

тип	значение по умолчанию	допустимые значения
string	100%

Ширина контрола

editorWidth#

Ширина контрола в колонках (для Bootstrap-верстки).

Отнаследовано от Control. По умолчанию значение 2

visible#

Видимость контрола.

Отнаследовано от Control.

centerLat#

тип	значение по умолчанию	допустимые значения
int	0

Широта начального центра карты

centerLng#

тип	значение по умолчанию	допустимые значения
int	0

Долгота начального центра карты

zoom#

тип	значение по умолчанию	допустимые значения
int	1

Начальное приближение карты

denyRoles#

Список ролей без прав на данный элемент.

Отнаследовано от Control.

readRoles#

Список ролей на чтение данных.

Отнаследовано от Control.

Методы#

addMarker#

Добавляет маркер на карту.

addMarker (options) 

position - координаты маркера
- lat - широта
- lng - долгота
title - подпись всплывающей подсказки на маркере
label - текст маркера

addRoute#

Добавляет маршрут на карту.

addRoute (options)

start - начальная координата маршрута
- lat - широта
- lng - долгота
end - конечная координата маршрута
- lat - широта
- lng - долгота

addTrack#

Добавляет трек на карту.

addTrack (options)

name - имя трека
strokeColor - цвет линии трека. Примеры значений: 'red', '#FF0000', 'rgb(255, 0, 0)'. По умолчанию значение 'black'
strokeWeight - ширина линии трека. По умолчанию значение 2.
strokeOpacity - прозрачность линии трека (от 0 да 1). По умолчанию значение 1
points - массив, который содержит точки трека. Обязательное свойство. Точка представляет собой объект со свойствами:
- lat - значение широты. Обязательное свойство
- lng - значение долготы. Обязательное свойство
- label - текст точки. Если свойство задано, то точка отображается в виде маркера
- title - подпись всплывающей подсказки (для точки, отображаемой в виде маркера)

fitBounds#

Фокусирует карту на маркерах, которые были переданы, устанавливает подходящий масштаб.

fitBounds (points) 

Возвращает Deferred-объект. Принимает массив, содержащий объекты со свойствами:

lat - широта
lng - долгота

focusRoute#

Фокусирует карту на точках маршрута и устанавливает подходящий масштаб.

focusRoute (route)

Возвращает Deferred-объект. В качестве параметра принимает объект маршрута.

removeMarker#

Удаляет маркер с карты.

removeMarker (marker) 

В качестве параметра принимает объект маркера, который нужно удалить.

removeRoute#

Удаляет маршрут с карты.

removeRoute (route) 

В качестве параметра принимает объект маршрута, который нужно удалить.

removeTrack#

Удаляет трек с карты.

removeTrack (track) 

В качестве параметра принимает объект трека, который нужно удалить.

События#

сlicked(s, e)#

Возникает при клике на карту. Возвращает параметры:

таблица

параметр	тип	описание
s	GoogleMaps	экземпляр класса контрола
e	object	объект со свойствами lat и lng
e.args	object	аргументы события
e.args.lat	string	широта координат места клика
e.args.lng	string	долгота координат места клика

Получение коллекции маршрутов#

routes - возвращает observable-массив, который содержит добавленные на карту маршруты. Маршрут представляет собой observable-объект, структура которого зависит от настроек дочернего контрола GoogleMapsRoute (имена свойств объекта маршрута формируются из значений свойств биндинга контрола).

Получение коллекции маркеров#

markers - возвращает observable-массив, который содержит добавленные на карту маркеры . Маркер представляет собой observable-объект, структура которого зависит от настроек дочернего контрола GoogleMapsMarker (имена свойств объекта маркера формируются из значений свойств биндинга контрола).

Получение коллекции треков#

tracks - возвращает observable-массив, который содержит добавленные на карту треки. Трек представляет собой observable-объект со свойствами:
- Name - имя трека
- StrokeColor - цвет линии трека
- StrokeWeight - ширина линии трека
- StrokeOpacity - прозрачность линии трека
- Points - observable-массив, который содержит точки трека

Дочерние контролы#

GoogleMapsMarker #

GoogleMapsRoute #

Использование#

Контрол Google Maps поставляется в отдельном пакете ecosoft-lexema8-google-maps. Для использования необходимо установить последнюю версию контрола

Для 8.3#

Версия пакета для 8.3 должна начинаться с 0.

Для 8.4#

Версия пакета для 8.4 должна начинаться с 1.

Конфигурирование#

Для 8.3#

В lexema.config необходимо добавить соответствующие настройки, чтобы использовать информацию о контроле (манифест) из пакета. Пример настройки файла lexema.config

Также необходимо в конфигурационном файле добавить новый раздел "googleMaps" со следующими настройками:

key - ключ для работы с Google Maps API, способ получения описан в статье
version - версия Google Maps, рекомендуется ставить квартальное обновление "quarterly"
language - язык интерфейса. Для русского языка необходимо указать "ru". Поддерживаемые языки.
region - регион использования. Для России необходимо указать "RU"

Для 8.4#

В конфигурационном файле проекта необходимо настроить свойство controls раздела front. Настройки контрола добавляются в раздел front.googleMaps вашего конфигурационного файла. Описание настроек см. в статье Ecosoft-lexema8-config

Примечания#

Примечание: Для ключа, который используется для работы с Google Maps API, необходимо настроить ограничение для работы только с сайтом вашего проекта (иначе ключом сможет воспользоваться злоумышленник)! Для этого нужно в личном кабинете в пункте "API и сервисы" выбрать пункт "учетные данные", затем выбрать ваш ключ для API. В пункте ограничения для ключа выбрать "HTTP-источники перехода (веб-сайты)", после этого в графе "принимать http-запросы от следующих источников (сайтов)" адрес своего сайта в формате .example.com/, где «example.com» — имя сайта. Если нужно добавить несколько доменов — нужно добавить их по одному в каждую новую строку. После сохраняете.

Примеры#

Пример шаблона формы с использованием контрола GoogleMaps доступен по ссылке

Пример модели с коллекцией маркеров и маршрутов доступен по ссылке

Пример тестовой формы http://aquila-dev.univers.local/#/view/googleMapsReg. Необходимо перейти в существующий документ, либо создать новый.

Работа с треками#

Пример создания трека

myForm.js

const points = [
    {lat: 54.659832738175226, lng: 54.7255859375, label: 'Start', title: 'Стартовая точка'},
    {lat: 54.67003194187746, lng: 54.74751477253051},
    {lat: 54.6765831739924, lng: 54.78974347126098},
    {lat: 54.69345269293477, lng: 54.82338910114379},
    {lat: 54.71487679306124, lng: 54.88827710163207},
    {lat: 54.730540960230684, lng: 55.0273228169641},
    {lat: 54.73827167182507, lng: 55.093927431221914},
    {lat: 54.71329021073202, lng: 55.20241742145629},
    {lat: 54.65583674762009, lng: 55.469196249230436},
    {lat: 54.65473595622417, lng: 55.688237513980994},
    {lat: 54.67498942950902, lng: 55.79947408624662, label: 'End', title: 'Конечная точка'}
]

this.controls.map.addTrack({
    strokeColor: '#FF0000',
    strokeOpacity: 0.6,
    strokeWeight: 2,
    name: 'track1',
    points
})

PageBlocker.on()
this.controls.map.fitBounds(points).always(() => {
    PageBlocker.off()
})

Пример удаления трека

myForm.js

const { map } = this.controls
const track = map.tracks().filter(track => track.Name() === 'track1')[0]

if (track) {
    map.removeTrack(track)
}

Примечания#

Маркер не отобразится на карте, если для него не задана координата широты или долготы.
Маршрут не отобразится на карте, если для начальной или конечной точки не задана координата широты или долготы.
При изменении координат точек уже добавленного на карту маршрута (в данном случае маршрут считается добавленным на карту, когда он имеет указанные значения широты и долготы координат всех точек), лучше удалить маршрут и добавить его заново. В таком случае будет тратиться меньшее количество запросов, поскольку при каждом изменении широты или долготы точек маршрута отправляется запрос на перестроение маршрута.

GoogleMaps#

Свойства#

height#

width#

editorWidth#

visible#

centerLat#

centerLng#

zoom#

denyRoles#

readRoles#

Методы#

addMarker#

addRoute#

addTrack#

fitBounds#

focusRoute#

removeMarker#

removeRoute#

removeTrack#

События#

сlicked(s, e)#

Получение коллекции маршрутов#

Получение коллекции маркеров#

Получение коллекции треков#

Дочерние контролы#

GoogleMapsMarker#

GoogleMapsRoute#

Использование#

Для 8.3#

Для 8.4#

Конфигурирование#

Для 8.3#

Для 8.4#

Примечания#

Примеры#

Работа с треками#

Примечания#

GoogleMapsMarker #

GoogleMapsRoute #