Клуб API Карт

Найдено на тему «balloon»:
Кастомный балун: не работает autoPan
Виктор Свириденко
11 октября 2017, 10:18

Салют. Случился затык, прошу знатоков подсказать, куда копать дальше. Суть проблемы: не работает autoPan у балунов, использующих кастомный макет, созданный с помощью фабрики макетов.

Пример: https://jsfiddle.net/36938ftz/.

После первого запуска карта смещается к открывшемуся балуну — это ожидаемо. Теперь раскомментируйте строку:

//layout: layout

Откроется кастомный балун за пределами карты. Чтобы прилететь к нему, в углу притаилась кнопочка.

Баг или фича? В документации для конструктора Balloon (https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Balloon-docpage/) опция autoPan — по умолчанию  true, и я её не меняю. Со стандартным балуном всё прокатывает. О несовместимости опций autoPan и layout — ни слова. Принудительный вызов autoPan не даёт результата, даже через then().

1 комментарий
Balloon,templateLayoutFactory,autoPan
Как изменить текст балуна объекта, добавленного через ObjectManager?
f-ph
14 сентября 2017, 04:44

Добрый день! Я создаю карту с кучей точек на ней. Точки добавляю с помощью ObjectManager:

const map = new ymaps.Map(document.getElementById('map'), {
    center: [63, 121],
    zoom: 6
});
const objectManager = new ymaps.ObjectManager({
    clusterize: true
});
objectManager.add({
    type: 'FeatureCollection',
    features: [
        {
            type: 'Feature',
            id: 1,
            geometry: {
                type: 'Point',
                coordinates: [64, 122]
            },
            properties: {
                balloonContentBody: 'Загрузка...'
            }
        },
        {
            type: 'Feature',
            id: 2,
            geometry: {
                type: 'Point',
                coordinates: [62, 120]
            },
            properties: {
                balloonContentBody: 'Загрузка...'
            }
        }
        // ...
    ]
});
map.geoObjects.add(objectManager);

Как в произвольный момент времени изменить текст балуна точки? Желательно не отказываться от ObjectManager, чтобы не жертвовать производительностью.

Пробовал так, получилось только изменить внешний вид метки:

objectManager.objects.setObjectOptions(1, {
    preset: 'islands#redIcon',
    balloonContentBody: 'Загружено (бла бла бла)',
    properties: {
        balloonContentBody: 'Загружено (бла бла бла)'
    }
});

Ещё пробовал так:

objectManager.objects.getById(1).properties.balloonContentBody = 'Загружено (бла бла бла)';

В этом случае новый текст применяется только после открытия балуна (т.е. если балун открыт, текст внутри не поменяется пока не закроешь и не откроешь балун). Есть ли способ получше?

1 комментарий
ObjectManager,Balloon
как открыть multiroute balloon
Татьяна
9 июня 2017, 22:41

Подскажите, как лучше всего открывать балун мультимаршрута автоматически при добавлении его на карту?

1 комментарий
multiRoute,Balloon
new ymaps.Placemark, задать max-width балуна
info@profatlas.ru
25 марта 2017, 19:45

Добрый день, есть код:

var myPlacemark = new ymaps.Placemark(coords, {

balloonContent: '<div style="width:1000px"></div>'

},

{

preset: 'islands#dotIcon'

maxWidth: '1000'//По идее тут, но нет

});

Суть вопроса, как задать балуну max-width?

2 комментария
Placemark,Balloon
Отключить стандартные балуны
mvblog
28 декабря 2016, 12:26

Здравствуйте. Я не могу отключить стандартные балуны на карте. Не те, которые я сам создаю, а именно стандартные, которые привязаны не к placemark, а к точкам на карте, являющиеся достопримечательностями магазинами и др.

Смотрите. Вот скрин карты 

Если я нажму на любую из меток, то откроется балун, пример которого представлен ниже

Вот как сделать так, чтобы таких балунов вообще на карте не было и такие кнопки были некликабелными. Спасибо.

2 комментария
Balloon,балун,кнопка,Placemark
Как управлять положением балуна внутри полигона ?
shopgo51
6 сентября 2016, 09:25

Здравствуйте, коллеги !
У меня следующая ситуация:
На карте есть коллекция полигонов, созданная следующей функцией:

var myCollection=[];
function polygon(groups, name) {
    
    var flag_groups = localStorage[prefix + name];
    if ((flag_groups == null) || (flag_groups == 'no'))
    {    
     localStorage[prefix + name] = 'yes' ;  
     myCollection[name] = new ymaps.GeoObjectCollection();        
    for (var i = 0; i < groups.length; i++)
    {
    myCollection[name].add( new ymaps.Polygon([                
            groups[i].coord_out,              
            groups[i].coord_in
           
    ], {
        balloonContent: "Описание участка",
        hintContent: groups[i].hint
    }, {
        fillColor: groups[i].fillColor,
        opacity: 0.55,
        strokeColor: '#000fff',
        strokeWidth: 1
    }));
    }
      myMap.geoObjects.add(myCollection[name]);    
   }
 else
  {
localStorage[prefix + name] = 'no';
      myMap.geoObjects.remove(myCollection[name]);    

  }
}

Всё отрабатывает, как описано в документации.
Вне карты есть небольшой список полигонов, выбирая из которого я перехожу на карту с полигонами так:
    
Вставки на php для определения, с какой из коллекций полигонов я работаю и получения значения для определения участка.
И вот теперь собственно описание проблемы:
1) если опустить список аргументов в функции open, балун открывается ("хвостик" балуна) в определенной вершине участка
2) если передать координаты точки, где я хочу открыть, то открывается в другой вершине, но не там, куда указывают координаты
 Как правильно задать в этом случае координаты для open, чтобы управлять положением балуна ?

5 комментариев
балун,balloon
ObjectManager, балун кластера и загрузка данных по требованию
denis.ezhkov
23 августа 2016, 14:07

Здравствуйте. Столкнулся с проблемой. На карте имеется несколько тысяч точек, добавленных при помощи objectManager. Включена кластеризация. При клике на точку выполняется AJAX-запрос данных, после чего загруженные данные добавляются к геообъекту

objectManager.objects.events.add('balloonopen', function(e) {
  var objectId = e.get('objectId');
  var hasBalloonData = function(objectId) {
    return objectManager.objects.getById(objectId).properties.loaded;
  };

  if (!hasBalloonData(objectId)) {
    // getPointInfo - это AJAX-запрос данных метки
    getPointInfo([objectId]).done(function(response) {
      var obj = objectManager.objects.getById(objectId);
      $.extend(true, obj.properties, response);
      obj.properties.loaded = true;
      _map.balloon.setData(obj);
    });
  }
});

Но иногда возникает ситуация, что две точки имеют одинаковые координаты и остаются объединенными в кластер до максимального масштаба. В этом случае при клике на кластер вызывается балун кластера.

Я хочу оставить двухколоночный макет, но в правую часть выводить данные в виде кастомного макета метки, такого же, как и при клике на одиночную метку. Данные должны подгружаться так же аяксом.

Все в целом работает, данные подгружаются, но балун не меняет своего внешнего вида. И выглядит пустым (см. картинку). Каким образом добавить название метки в левую часть? Как сделать так, чтобы правая часть балуна обновлялась сразу же, а не после переключения между точками?

UPD:

Получилось сделать только так:

getPointInfo(ids).done(function(response) {
  $.each(response, function(idx, pointInfo) {
    var obj = objectManager.objects.getById(pointInfo.id);
    $.extend(true, obj.properties, pointInfo);
    obj.properties.loaded = true;
    obj.properties.clusterCaption = pointInfo.title;
  });

  var balloonData = objectManager.clusters.balloon.getData();
  objectManager.clusters.balloon.setData(balloonData);
});

Это правильный способ обновления содержимого балуна? Или можно то же самое сделать более правильно?

9 комментариев
ObjectManager,cluster,balloon,AJAX,динамическая загрузка
Как создать HTML-метку с поведением обычной метки (с подсказкой и балуном)?
f-ph
2 апреля 2016, 10:15

Здравствуйте. Мне нужно создать на карте метку (ymaps.Placemark), которая задаётся HTML кодом (по ряду причин задать картинкой нельзя). Как следать это так, чтобы при этом работало стандартное поведение метки (курсор при наведении, подсказка и балун)?

Я пытался сделать так:

var customIcon = ymaps.templateLayoutFactory.createClass( '<div class="theme-border theme-background" style="width: 0.6em; height: 0.6em; border-style: solid; border-width: 0.4em; border-radius: 100%; margin: -0.7em;"></div>' );
var placemark = new ymaps.Placemark(
    [ 43, 56 ],
    { hintContent: 'Метка', balloonContent: 'Описание' },
    { iconLayout: customIcon }
);
myMap.geoObjects.add( placemark );

Но так исчезает вся интерактивность метки.

Ещё пытался сделать так:

var customIcon = ymaps.templateLayoutFactory.createClass( '<div class="theme-border theme-background" style="width: 0.6em; height: 0.6em; border-style: solid; border-width: 0.4em; border-radius: 100%; margin: -0.7em;"></div>' );
var placemark = new ymaps.Placemark(
    [ 43, 56 ],
    { hintContent: 'Метка', balloonContent: 'Описание' },
    {
        iconLayout: 'default#imageWithContent',
        iconImageHref: '',
        iconImageSize: [ 0, 0 ],
        iconImageOffset: [ 0, 0 ],
        iconContentLayout: customIcon
    }
);
myMap.geoObjects.add( placemark );

В таком случае поведение сохраняется, но активной областью метки становится квадрат 1х1 пиксель в центре, что не хорошо. А использование 'default#imageWithContent' выглядит как костыль.

3 комментария
макет метки,html,balloon
Не срабатывает клик событие внутри балуна объекта
Удалённый пользователь
26 января 2016, 08:30

Не поучается подвязаться на класс "unique-routes", внутри текста балуна, пробовал через ymaps.templateLayoutFactory.createClass.

На форуме, в песочнице видел, что делают через Placemark, шаблон, но ничего не помогло.

Могу скинуть ссылку сайта, если надобно

 

        var routeSplit, routeNumber, routeInfo, stopLink;
        var uniqueRoutes = [];
var objectManagerStopsAll = new ymaps.ObjectManager({
clusterize: true,
gridSize: 64
});
for ( var key in data ) {
if ( data.hasOwnProperty(key) ) {
routeNumber = data[key][4];
if ( routeNumber.indexOf(",") >= 0 ) {
routeSplit = routeNumber.split(",");
uniqueRoutes = [];
routeInfo = '<br />';
$.each(routeSplit, function(i, el){
if ( $.inArray(el, uniqueRoutes) === -1 ) uniqueRoutes.push(el);
});
uniqueRoutes.sort(sortNumber);
for ( var i = 0; i < uniqueRoutes.length; i++ ) {
if ( i !== 0 && i % 10 === 0  ) routeInfo += '<br />';
routeInfo += '<a href="javascript:void(0)" class="unique-routes"><span>'+ uniqueRoutes[i] +'</span></a>';
}
}
else {
routeInfo = '<br /><a href="javascript:void(0)" class="unique-routes"><span>'+ routeNumber +'</span></a>';
}
stopLink = data[key][1]; //Title
objectManagerStopsAll.add({
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"id": key,
"geometry": {
"type": "Point",
"coordinates": [
data[key][2], //Lat
data[key][3]  //Lon
]
},
"properties": {
"balloonContentBody": stopLink + routeInfo,
"hintContent": data[key]['sId']
}
}
]
});
objectManagerStopsAll.objects.setObjectProperties(key, {
iconContent: data[key][1]
});
}
}
objectManagerStopsAll.objects.options.set({
preset: 'islands#darkBlueStretchyIcon'
});

 

3 комментария
API 2.1,balloon,балун,объекты,метка,ObjectManager balloon click inner,ObjectManager
Не обновляется размер balloon'а у метки
FlinnRaider
25 ноября 2015, 10:39

В качестве основы использую вот этот пример - https://tech.yandex.ru/maps/jsbox/2.1/balloon_autopan

 

При изменении контента балуна через placemark.properties.set('balloonContent', '...'), балун меняет свой размер в соответствии с кол-вом контента, руководствуясь инструкцями из макета балуна (примечание 1).

 

В моем случае нужно загрузить содержимое балуна через ajax вместе с некоторыми inline-скриптами (само-собой через простую вставку это не работает (примечание 2)).

Я загружаю контент при помощи jquery-pjax, который автоматически обновляет контент тега с указанным id (примечание 3).

При таком подходе контент в балуне обновляется, inline-скрипты выполняются, но его размер не изменяется.

 

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

 

P.S. Общий пример кода в примечании 4.

 

$[[options.contentLayout observeSize minWidth=235 maxWidth=235 maxHeight=350]]
// Строка 17 из этого примера https://tech.yandex.ru/maps/jsbox/2.1/balloon_autopan

 

 var $balloonContentContainer = $('#my-balloon');
$.get('/get-my-balloon-content').done(function(renderedHtml){
    $balloonContentContainer.html(renderedHtml); // Это не отработает как необходимо, так как в возвращенном html есть inline-скрипты, которые нужно выполнить
})

  

$.pjax({
    timeout  : false,
    push      : false,
    replace   : false,
    url          : '/get-my-balloon-content',
    container: '#my-balloon'
});

 

 var placemark = new ymaps.Placemark(
    feature.geometry.coordinates,
    feature.properties,
    feature.options
);
placemark.events.add('balloonopen', () => {
    var selector = `#${placemark.properties.get('containerId')}`;
    var promise     = $.pjax({
        timeout  : false,
        push     : false,
        replace  : false,
        url      : placemark.properties.get('contentUrl'),
        container: selector
    });
  promise.done(() => {
      // Здесь нужно вызвать событие изменения размеров балуна. 
      // placemark.events.fire('change') // Что-то вроде этого.
  })
});

 

6 комментариев
API 2.1,события,placemark,balloon,балун,метка,Resize