Map View отображает список предстоящих событий рядом с картой, позволяя пользователям просматривать или редактировать местоположение события, а также задавать местоположение для новых событий.
По умолчанию список событий слева показывает события, начинающиеся с текущей даты. Чтобы изменить это поведение, используйте свойства map_start и map_end.
Для использования Google Maps убедитесь, что вы добавили свой собственный Google API ключ на страницу.
Чтобы добавить Map View в планировщик, выполните следующие шаги:
1. Подключите файл кода для провайдера карты на вашу страницу, как показано ниже:
<-- используйте свой собственный Google API ключ для подключения Google Maps-->
<script src="//maps.google.com/maps/api/js?key=[your Google API key]&sensor=false"
type="text/javascript"></script>
Вы можете сменить провайдера карты и настроить его параметры позже, если потребуется. Изменения применятся при следующем рендеринге карты.
2. Включите плагин Map view:
scheduler.plugins({
map_view: true
});
3. Добавьте вкладку представления в разметку планировщика:
<div id="scheduler_here" class="dhx_cal_container" ...>
<div class="dhx_cal_navline">
...
<div class="dhx_cal_tab" data-tab="map"></div>
</div>
...
</div>
4. Установите название для вкладки:
//'map_tab' соответствует нашему div
scheduler.locale.labels.map_tab = "Map";
5. Добавьте секцию в lightbox для ввода местоположения события:
scheduler.config.lightbox.sections=[
{name:"description", height:50,map_to:"text", type:"textarea", focus:true},
{name:"location", height:43, map_to:"event_location", type:"textarea"},
{name:"time", height:72, type:"time", map_to:"auto"}
]
6. Задайте название для новой секции:
scheduler.locale.labels.section_location = "Location";
7. Инициализируйте планировщик:
//'map' — это стандартное имя для Map View
scheduler.init('scheduler_here',new Date(2024,5,11),"map");
dhtmlxScheduler поддерживает Google Maps, OpenStreetMaps и Mapbox как провайдеры карт.
Чтобы настроить провайдера карты, выполните следующие шаги:
1. Подключите библиотеку карты на вашу страницу, например, Google Maps:
<-- используйте свой собственный Google API ключ для подключения Google Maps-->
<script src="//maps.google.com/maps/api/js?key=[your Google API key]&sensor=false"
type="text/javascript"></script>
2. При необходимости настройте параметры через опцию map_settings, например:
scheduler.config.map_settings = {
initial_position: {
lat: 48.724,
lng: 8.215
}
}
...
scheduler.init('scheduler_here',new Date(2024,5,11),"map");
3. Укажите название провайдера карты одним из следующих способов:
scheduler.config.map_view_provider = "googleMap";
...
scheduler.init('scheduler_here',new Date(2024,5,11),"map");
Доступные значения: "googleMap", "openStreetMaps", "mapbox".
scheduler.config.map_settings = {
view_provider: "googleMap"
}
...
scheduler.init('scheduler_here',new Date(2024,5,11),"map");
Начиная с v7.1, большинство параметров карты настраиваются через свойство map_settings. Значения по умолчанию:
scheduler.config.map_settings = {
initial_position: {
lat: 48.724,
lng: 8.215
},
error_position: {
lat: 15,
lng: 15
},
initial_zoom: 1,
zoom_after_resolve: 15,
info_window_max_width: 300,
resolve_user_location: true,
resolve_event_location: true,
view_provider: "googleMap"
}
...
scheduler.init('scheduler_here',new Date(2024,5,11),"map");
Эти свойства включают:
Пользовательские параметры, такие как токены, можно добавить в map_settings, например:
scheduler.config.map_settings.accessToken = "pk.eyJ...";
scheduler.xy.map_date_width — ширина колонки даты
scheduler.xy.map_description_width — ширина колонки описания
Если встроенные провайдеры карт не подходят под ваши задачи, вы можете создать собственный адаптер карты, реализовав класс согласно интерфейсу адаптера карты. Он должен содержать следующие методы:
interface IMapAdapter {
// инициализация экземпляра карты с переданными опциями
initialize(container: HTMLElement, options: IMapSettings): void;
// удаление экземпляра карты при переключении с Map View, освобождение ресурсов
destroy(container: HTMLElement): void;
// добавление маркера события на карту
addEventMarker(event: ICalendarEvent): void;
// удаление маркера по eventId
removeEventMarker(eventId: string): void;
// обновление маркера события
updateEventMarker(event: ICalendarEvent): void;
// удаление всех маркеров событий с карты
clearEventMarkers(): void;
// установка центра карты в заданную точку
setView(latitude: number, longitude: number, zoom: number): void;
// обработка клика по событию в планировщике
onEventClick(event: ICalendarEvent): void;
// преобразование строкового адреса в координаты, возвращает Promise с {lat, lng}
resolveAddress(address: string): Promise<IMapPosition>;
}
Для корректного отображения в Map View элементы данных должны содержать несколько дополнительных свойств. Обязательные свойства:
Убедитесь, что ваш .php-файл соответствует данным в базе данных.
Map View использует четыре подписи в локали:
Обычно первые две подписи задаются при добавлении вкладки, последние две рекомендуется менять только при локализации на язык, отличный от английского.
Начиная с v7.0, вы можете настраивать форму маркеров, переопределяя метод createMarker()
Map View:
const { AdvancedMarkerElement,
PinElement } = await google.maps.importLibrary("marker");
scheduler.ext.mapView.createMarker = function(config){
const pinViewGlyph = new PinElement({
glyphColor: "white",
});
return new AdvancedMarkerElement({
...config,
content: pinViewGlyph.element,
});
};
Подробнее смотрите в документации Google Maps.