sashakravtsov
commented
3 years ago На сколько правильно не знаю, но работает :)
ymaps.ready(allPlacemarks);
function allPlacemarks() {
var myMap = new ymaps.Map('allPlacemarks', { // ID блока с картой
center: [55.76, 37.64], // Москва
zoom: 12,
controls: ['zoomControl', 'fullscreenControl']
},{
suppressMapOpenBlock: true,
yandexMapDisablePoiInteractivity: true
}),
objectManager = new ymaps.ObjectManager({
// Чтобы метки начали кластеризоваться, выставляем опцию.
clusterize: true,
// ObjectManager принимает те же опции, что и кластеризатор.
gridSize: 32,
clusterDisableClickZoom: true
});
//отключаем зум колёсиком мышки
myMap.behaviors.disable('scrollZoom');
// Задаём опции кластеров
objectManager.clusters.options.set({
// Установим дизайн метки по умолчанию:
preset: 'islands#blueClusterIcons',
// Установим балун кластера в виде карусели для удобства
balloonContentLayout: 'cluster#balloonCarousel',
// Устанавливаем максимальное количество элементов в нижней панели на одной странице
clusterBalloonPagerSize: 5,
// Устанавливаем режим открытия балуна.
// В данном примере балун никогда не будет открываться в режиме панели.
clusterBalloonPanelMaxMapArea: 0,
// Устанавливаем ширину макета контента балуна.
balloonContentLayoutWidth: 400,
// Устанавливаем высоту макета контента балуна.
balloonContentLayoutHeight: 300
});
// Подрубаем монитор,
// будем отслеживать изменения в кластерах
var activeObjectMonitor = new ymaps.Monitor(objectManager.clusters.state);
// При клике на некластеризованные объекты получаем содержимое балуна
objectManager.objects.events.add('click', function (e) {
var objectId = e.get('objectId');
setBalloonData(objectId);
});
// В кластеризованных объектах отслеживаем изменение выбранного объекта
activeObjectMonitor.add('activeObject', function () {
var objectId = activeObjectMonitor.get('activeObject').id;
setBalloonData(objectId);
});
// Проверяем, есть ли у выбранного объекта содержимое балуна
function hasBalloonData(objectId) {
return objectManager.objects.getById(objectId).properties.balloonContent;
}
// Получаем данные и устанавливаем содержимое балуна
function setBalloonData(objectId) {
if (!hasBalloonData(objectId)) {
getBalloonData(objectId).done(function (data) {
var object = objectManager.objects.getById(objectId);
object.properties.balloonContent = data;
// Открываем балун на этом элементе
var objectState = objectManager.getObjectState(objectId);
if (objectState.isClustered) {
// Если это кластер
objectManager.clusters.balloon.open(objectState.cluster.id);
}
else {
// Если обычный объект
objectManager.objects.balloon.open(objectId);
}
});
}
}
// Чтобы задать опции одиночным объектам и кластерам,
// обратимся к дочерним коллекциям ObjectManager.
objectManager.objects.options.set('preset', 'islands#greenDotIcon');
objectManager.clusters.options.set('preset', 'islands#greenClusterIcons');
// Добавляем objectManager на карту
myMap.geoObjects.add(objectManager);
$.ajax({
url: dle_root + 'engine/ajax/controller.php',
//url: dle_root + 'engine/ajax/ymaps/all.php',
dataType: 'json',
data: {
mod: 'ymaps_all',
// вместо allplacemarks можно прописать имя другого шаблона, содержащего в себе конфигурацию для вывода меток
// сам шаблон с конфигом находится в папке ymaps/all
preset: 'ajaxmap'
},
})
.done(function (data) {
// Если всё ок - добавим метки на карту
objectManager.add(data);
myMap.setBounds(myMap.geoObjects.add(objectManager).getBounds(), {checkZoomRange:true}).then(function(){ if(myMap.getZoom() > 10) myMap.setZoom(10);});
// "Отключим" прелодер.
$('#allPlacemarks').removeClass('loader');
})
.fail(function () {
console.log("error");
});
// Функция, осуществляющая запрос за данными балуна на сервер.
function getBalloonData(objectId) {
var dataDeferred = ymaps.vow.defer();
// Для получения новости используется модуль {AJAX FULL-STORY}:
// http://pafnuty.name/modules/156-ajax-full-story.html
$.ajax({
url: dle_root + 'engine/ajax/full-story.php',
type: 'GET',
dataType: 'html',
data: {
newsId: objectId, // Обязательная переменная
template: 'ajax/baloon'
},
})
.done(function (data) {
dataDeferred.resolve(data);
})
.fail(function () {
console.log("full-story error");
dataDeferred.resolve('error');
});
return dataDeferred.promise();
}
}
</script>```
``
Подскажите, пожалуйста. Как автоматически масштабировать при наличии меток, так чтобы они все отображались в области видимости ? Код который использую приложил (это взято из примера "вывод всех меток с балунами").