Since 4.0
Компонент 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
Основные свойства
Следующие свойства определяют конфигурацию компонента 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 }
]
});
Все объекты данных будут отображаться в виде маркеров или тепловой карты, в зависимости от указанного типа слоя.
Обязательные параметры
Два обязательных свойства объекта данных географической точки:
Полный список доступных свойств можно найти в Справочнике Google API.
Для получения объекта 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){
// ваш код
});
Обработчик события получает два параметра:
Существует два связанных с ДнД события. События доступны для маркеров с включенным свойством draggable:
{ id:1, lat:48.782, lng:9.177, draggable:true}
1) onAfterDrop событие срабатывает после того как перетаскивание совершено. Обработчик функции получает два параметра:
$$("map").attachEvent("onAfterDrop", function(id, item){
// ваш код
});
2) onDrag событие срабатывает когда перетаскивание началось:
$$("map").attachEvent("onDrag", function(id, item){
// ваш код
});
Обработчик функции получает два параметра:
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 ]
});
Наверх