Виджеты Примеры Демо Форум Сервисы
Документация
СтартКомпоненты

GoogleMap

Since 4.0

Справочник по API

Обзор

Компонент GoogleMap позволяет работать с географическими данными с помощью Webix и Google Map API. GoogleMap основан на Природа Webix компонента и наследует API от DataStore.

Инициализация

Вы можете инициализировать базовый GoogleMap используя код ниже:

webix.ui({
    // укажите свой ключ API Google
    key:"AIzaSyAi0oVNVO-e603aUY8SILdD4v9bVBkmiTg",
    view:"google-map",
    id:"map",
    zoom:6,
    center:[ 48.724, 8.215 ]
});

Обратите внимание что перед работой с Webix GoogleMap вам необходимо получить личный ключ API Google.

Related sample:  GoogleMap::Basic

Основные свойства

  • key - ваш личный ключ API Google

Следующие свойства определяют конфигурацию компонента GoogleMap:

  • id - (string) определяет уникальный ID компонента;
  • zoom - (number) определяет разрешение для отображения объектов карты;
  • center - (array) определяет центр карты. Это массив двух элементов (широта и долгота) через запятую.
  • mapType - (string) определяет тип карты Google. Существует 4 типа карт (прописью!): "ROADMAP","SATELLITE","HYBRID","TERRAIN".
  • layerType - (string) типы слоев карты. Существует два типа слоев, которые вы можете использовать для компонента GoogleMap:

Загрузка данных в GoogleMap

GoogleMap - это компонент основанный на DataStore, поэтому вы можете работать с ним также, как и с любым другим компонентом данных Webix.

Каждая точка на карте это отдельный элемент данных. Вы можете хранить точки в наборе данных и использовать все распространенные способы загрузки для работы с данными карты.

Например, вы можете задать данные на клиенте с помощью параметра data:

webix.ui({
    // укажите свой ключ API Google
    key:"AIzaSyAi0oVNVO-e603aUY8SILdD4v9bVBkmiTg",
    view:"google-map",
    id:"map",
    zoom:6,
    center:[ 48.724, 8.215 ],
    data:[
        { id:1, lat:48.782,  lng:9.177,   label:"A", draggable:true },
        { id:2, lat:47.366,  lng:8.55,    label:"B", draggable:true },
        { id:3, lat: 48.137, lng: 11.575, label:"C", draggable:true }
    ]
});

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

Обязательные параметры

Два обязательных свойства объекта данных географической точки:

  • lat - координата широты
  • lng - координата долготы

Полный список доступных свойств можно найти в Справочнике Google API.

Получение объекта GoogleMap

Для получения объекта GoogleMap используйте метод getMap:

var mapObj = $$("map").getMap();

Метод принимает параметр waitMap. Если параметр передан, метод вернет промис, который разрешится при отображении карты.

$$("map").getMap("waitMap").then(function(mapObj){
    // ваш код
});

Отображение данных на карте

Метод drawData() используется для отрисовки данных на карте:

$$("map").drawData();

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

Получение объекта маркера

Для получения объекта маркера используйте метод getItem():

$$("map").getItem(id).$marker;

Управление видимостью маркеров

Вы можете скрыть/показать маркер (объект данных) используя свойство hidden:

{ id:1, lat:48.782,  lng:9.177,  hidden:true}

Показать маркер

Чтобы показать маркер, используйте метод showItem(). Метод прокручивает карту к месту, где расположен указанный маркер. Метод принимает ID маркера в качестве параметра:

$$("map").showItem(1)

Срабатывание клика по маркеру

Чтобы отловить клик по маркеру, задайте обработчик событию onItemClick:

$$("map").attachEvent("onItemClick", function(id, marker){
    // ваш код
});

Обработчик события получает два параметра:

  • id - (number) ID маркера
  • marker - (object) объект маркера

Обнаружение драг-н-дроп

Существует два связанных с ДнД события. События доступны для маркеров с включенным свойством draggable:

{ id:1, lat:48.782,  lng:9.177,  draggable:true}

1) onAfterDrop событие срабатывает после того как перетаскивание совершено. Обработчик функции получает два параметра:

  • id - (number) ID маркера
  • item - (object) объект данных
$$("map").attachEvent("onAfterDrop", function(id, item){
    // ваш код
});

2) onDrag событие срабатывает когда перетаскивание началось:

$$("map").attachEvent("onDrag", function(id, item){
    // ваш код
});

Обработчик функции получает два параметра:

  • id - (number) ID маркера
  • item - (object) объект данных

Related sample:  GoogleMap:Draggable Markers

Работа с тепловой картой

Получение объекта тепловой карты

Чтобы получить объект тепловой карты, используйте метод getHeatmap:

var heatmapObj = $$("map").getHeatmap();

Тепловая карта непрерывно обновляется. Чтобы получить актуальный объект тепловой карты, используйте событие onHeatMapRender. Событие сработает при (пере-)отрисовке тепловой карты.

$$("map").attachEvent("onHeatMapRender", function(heatmapObj){
    // ваш код
});

Обработчик события получает в качестве параметра объект тепловой карты.

Настройки тепловой карты

Вы можете настроить отображение тепловой карты с помощью свойства heatmapConfig. Это объект, который может содержать различные свойства API Google для тепловой карты, например затемнение (opacity) и т.п.

webix.ui({
    // укажите свой ключ API Google
    key:"AIzaSyAi0oVNVO-e603aUY8SILdD4v9bVBkmiTg",
        view:"google-map",
        id:"map",
    zoom:13,
    center:[ 37.774546, -122.433523 ],
    layerType:"heatmap",
    heatmapConfig:{                 opacity:"0.4"           },                          url:"data/heatmap.json"
});

Полный список свойств в Справочнике Google API.

Работа с источниками данных

В настройках Google Map по умолчанию задан следующий путь к источнику карты: //maps.google.com/maps/api/js. Используемый в вашем приложении протокол будет зависеть от пути, который вы укажите.

Если вы хотите задать свой протокол для URL карты, используйте параметр src:

webix.ui({
  // укажите свой ключ API Google
  key:"AIzaSyAi0oVNVO-e603aUY8SILdD4v9bVBkmiTg",
  src:"https://maps.google.com/maps/api/js",
  view:"google-map",
  id:"map",
  zoom:6,
  center:[ 48.724, 8.215 ] 
});
Наверх
© XB Software Ltd
2013-2023