Возможно увеличить масштаб карты, когда она отображает раскрывшиеся метки кластера?
Иногда при нажатии на метку кластера карта отображает его метки прямо на границе окна (пример ниже). Подскажите, возможно ли как-то отследить подобную ситуацию, чтобы уменьшить масштаб на единицу? Или, хотя бы, в любом случае уменьшить масштаб карты на единицу после отображения меток кластера?
Отслеживать
задан 24 мар 2023 в 15:36
7 2 2 бронзовых знака
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Включите кластеризатору учёт отступов useMapMargin , и задайте удобные вам отступы через заданных map.margin.Manager или сразу при настройке карты.
var myMap = new ymaps.Map('map', < center: [55.751574, 37.573856], margin: [50,50,50,50], zoom: 9 >), clusterer = new ymaps.Clusterer(< useMapMargin: true >) Для менеджера объектов всё делается аналогично.
var objectManager = new ymaps.ObjectManager(< clusterize: true, useMapMargin: true >); Но вообще useMapMargin по-умолчанию включен, специально включать его не требуется.
Пример на эту тему в песочнице Яндекса есть.
Как сделать масштабирование Яндекс.Карты при скрытии/отображении коллекции?
На яндекс картах есть две группы меток.
В зависимости от состояния радиокнопки (чекбокса) отображается одна из них.
Как увеличить/уменьшить масштаб карты, в центр метки, при переключении радиокнопки?
fiddle: https://jsfiddle.net/338za0mj/
- Вопрос задан более трёх лет назад
- 418 просмотров
Комментировать
Решения вопроса 1
0xD34F @0xD34F Куратор тега Яндекс.Карты
Для этого воспользуйтесь методами setBounds и getBounds. Типа так.
UPD. Вынесено из комментариев:
А можно регулировать масштаб? Сейчас максимально приближено. Можно установить значение zoom 15, например?
Можно проверять после вызова setBounds текущий зум, и если больше допустимого — устанавливать сколько надо. Типа так.
Ответ написан более трёх лет назад
Нравится 2 3 комментария
Евгений Жадько @Jeka778 Автор вопроса
Спасибо, то что нужно!
А можно регулировать масштаб? Сейчас максимально приближено. Можно установить значение zoom 15, например?
Как изменить размер яндекс карт?
Допустим, на большом размере экрана яндекс-карты имеют определенную ширину, а вот при уменьшении экрана надо, чтобы карта была на всю ширину . Пробовал ymaps задать width 100%, но не помогло, видимо, javascript код перекрывает. Как при низком разрешении задать ширину 100%?
- Вопрос задан более трёх лет назад
- 1534 просмотра
Комментировать
Решения вопроса 0
Ответы на вопрос 1
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- Яндекс.Карты
Как отследить начало перетаскивания в Яндекс Картах?
- 1 подписчик
- 23 апр.
- 36 просмотров
- WordPress
- +2 ещё
Как сделать автоматический выбор региона по IP в WordPress?
- 1 подписчик
- 22 апр.
- 69 просмотров
Масштабирование Яндекс карты
Друзья, не могу разобраться и прошу помощи у Вас. Начну с кода (возможно, так будет правильно). Подскажите, какую функцию нужно добавить чтобы карта самостоятельно определяла масштаб где будут видны все метки карты ? Если нужна ещё какая-то информация пишите, я добавлю что требуется.
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 >); //отключаем зум колёсиком мышки myMap.behaviors.disable('scrollZoom'); //на мобильных устройствах. (проверяем по userAgent браузера) //if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) < //. отключаем перетаскивание карты //myMap.behaviors.disable('drag'); //>// Задаём опции кластеров 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 на карту myMap.geoObjects.add(objectManager); // Выполняем ajax-запрос к мини-модулю для вывода всех меток $.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); // "Отключим" прелодер. $('#allPlacemarks').removeClass('loader'); // Выплюнем в консольку данные, пришедшие от модуля: // console.log(data); // Эти переменные нужны для дальнейшего показа количества видимых на карте меток. var singleCounter = 0, singleCounterHidden = 0, clusterCounter = 0; // Пример организации обхода массива видимых меток objectManager.objects.each(function (object) < // В данный момент нас интересует конкретный геообъект var objectState = objectManager.getObjectState(object.id); if (objectState.isClustered) < // Если метка геообъекта находится в составе кластера - прибавим счётчик. clusterCounter++; >else < // Если метка не в кластере прибавим другой счётчик. singleCounterHidden++; if (objectState.isShown) < // Если метка не в кластере и показана в области // видимости карты - прибавим другой счётчик и // убавим счётчик всех объектов. Таким образом счётчик будет // показывать только скрытые объекты singleCounter++; singleCounterHidden--; >> >, myMap); // Ну и теперь можно выплюнуть собранные счётчики в консоль: console.log('Количество показаных единичных меток: ' + singleCounter); console.log('Количество невидимых единичных меток: ' + singleCounterHidden); console.log('Количество показаных меток, составе кластера: ' + clusterCounter); >) .fail(function () < console.log("error"); >); // Функция, осуществляющая запрос за данными балуна на сервер. function getBalloonData(objectId) < var dataDeferred = ymaps.vow.defer(); // Для получения новости используется модуль : // 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(); > >```