Не могу понять почему не отображаются балуны у меток Яндекс карты
Почему то когда меняю иконку метки на свою то не отображается балун
objectManager.add({
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"id": 1,
"geometry": {"type": "Point", "coordinates": [51.292826, 37.823287]},
"properties": {"balloonContent": "Детские сады"},
**"options": {"iconOffset": [-24, -64], "preset": "my#kinder"}**
},
]
});Ниже представляю собственно созданную метку.
ymaps.option.presetStorage.add('my#kinder', {
iconLayout: ymaps.templateLayoutFactory.createClass('<div class="circle_layout"><img src="/local/templates/sverdlova/img/map-3.svg"></div>'),
});
Ссылка на страницу с картой http://sverdlovadev.web-oblako.ru/location/
<script>
ymaps.ready(init);
// map01
function init() {
var myMap = new ymaps.Map('ymap01', {
center: [51.290027, 37.834413],
zoom: 15,
controls: [],
}, {
searchControlProvider: 'yandex#search',
suppressMapOpenBlock: true
}),
objectManager = new ymaps.ObjectManager({
// Чтобы метки начали кластеризоваться, выставляем опцию.
clusterize: false,
// ObjectManager принимает те же опции, что и кластеризатор.
// gridSize: 32,
// clusterDisableClickZoom: true
});
// objectManager.objects.options.set('preset', 'islands#greenDotIcon');
// objectManager.clusters.options.set('preset', 'islands#greenClusterIcons');
myMap.geoObjects.add(objectManager);
var listBoxItems = ['Детские сады', 'Школы', 'Рестораны', 'Кафе', 'Магазины', 'Бутики', 'Бассейны', 'Фитнес', 'Развлечения','Компания']
.map(function(title) {
return new ymaps.control.ListBoxItem({
data: {
content: title
},
state: {
selected: true
}
})
}),
listBoxControl = new ymaps.control.ListBox({
data: {
content: 'Фильтр',
title: 'Фильтр'
},
items: listBoxItems,
state: {
expanded: true,
filters: listBoxItems.reduce(function(filters, filter) {
filters[filter.data.get('content')] = filter.isSelected();
return filters;
}, {})
},
options: {
visible: false
}
});
myMap.controls.add(listBoxControl);
// Добавим отслеживание изменения признака, выбран ли пункт списка.
listBoxControl.events.add(['select', 'deselect'], function(e) {
var listBoxItem = e.get('target');
var filters = ymaps.util.extend({}, listBoxControl.state.get('filters'));
filters[listBoxItem.data.get('content')] = listBoxItem.isSelected();
listBoxControl.state.set('filters', filters);
});
var filterMonitor = new ymaps.Monitor(listBoxControl.state);
filterMonitor.add('filters', function(filters) {
objectManager.setFilter(getFilterFunction(filters));
});
function getFilterFunction(categories){
return function(obj){
var content = obj.properties.balloonContent;
return categories[content]
}
};
//myMap.behaviors.disable('scrollZoom');
ymaps.option.presetStorage.add('my#kinder', {
iconLayout: ymaps.templateLayoutFactory.createClass('<div class="circle_layout"><img src="/local/templates/sverdlova/img/map-3.svg"></div>'),
});
ymaps.option.presetStorage.add('my#school', {
iconLayout: ymaps.templateLayoutFactory.createClass('<div class="circle_layout"><img src="/local/templates/sverdlova/img/map.svg"></div>'),
});
ymaps.option.presetStorage.add('my#bank', {
iconLayout: ymaps.templateLayoutFactory.createClass('<div class="circle_layout"><img src="/local/templates/sverdlova/img/cat4.svg"></div>'),
});
ymaps.option.presetStorage.add('my#hospital', {
iconLayout: ymaps.templateLayoutFactory.createClass('<div class="circle_layout"><img src="/local/templates/sverdlova/img/cat5.svg"></div>'),
});
ymaps.option.presetStorage.add('my#shop', {
iconLayout: ymaps.templateLayoutFactory.createClass('<div class="circle_layout"><img src="/local/templates/sverdlova/img/map-6.svg"></div>'),
});
ymaps.option.presetStorage.add('my#bus', {
iconLayout: ymaps.templateLayoutFactory.createClass('<div class="circle_layout"><img src="/local/templates/sverdlova/img/cat7.svg"></div>'),
});
ymaps.option.presetStorage.add('my#pool', {
iconLayout: ymaps.templateLayoutFactory.createClass('<div class="circle_layout"><img src="/local/templates/sverdlova/img/map-2.svg"></div>'),
});
ymaps.option.presetStorage.add('my#fit', {
iconLayout: ymaps.templateLayoutFactory.createClass('<div class="circle_layout"><img src="/local/templates/sverdlova/img/map-7.svg"></div>'),
});
ymaps.option.presetStorage.add('my#apteka', {
iconLayout: ymaps.templateLayoutFactory.createClass('<div class="circle_layout"><img src="/local/templates/sverdlova/img/cat10.svg"></div>'),
});
ymaps.option.presetStorage.add('my#company', {
iconLayout: ymaps.templateLayoutFactory.createClass('<img src="/local/templates/sverdlova/img/logo_loc.svg">'),
});
objectManager.add({
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"id": 0,
"geometry": {"type": "Point", "coordinates": [51.291024, 37.827122]},
"properties": {"balloonContent": "Детские сады", "balloonContentHeader": "<font size=3><b><a target='_blank' href='https://yandex.ru'>Здесь может быть ваша ссылка</a></b></font>", "balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em> <input></p><p><input type='submit' value='Отправить'></p>", "balloonContentFooter": "<font size=1>Информация предоставлена: </font> <strong>этим балуном</strong>", "clusterCaption": "<strong><s>Еще</s> одна</strong> метка", "hintContent": "<strong>Текст <s>подсказки</s></strong>"},
// "options": {"iconOffset": [-24, -64], "preset": "my#kinder", }
},
// {
// "type": "Feature",
// "id": 0,
// "geometry": {"type": "Point", "coordinates": [51.291024, 37.827122]},
// "properties": {"balloonContentHeader": "<font size=3><b><a target='_blank' href='https://yandex.ru'>Здесь может быть ваша ссылка</a></b></font>", "balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em> <input></p><p><input type='submit' value='Отправить'></p>", "balloonContentFooter": "<font size=1>Информация предоставлена: </font> <strong>этим балуном</strong>", "clusterCaption": "<strong><s>Еще</s> одна</strong> метка", "hintContent": "<strong>Текст <s>подсказки</s></strong>"},
// "options": {"iconOffset": [-24, -64], "preset": "my#kinder"}
// },
{
"type": "Feature",
"id": 1,
"geometry": {"type": "Point", "coordinates": [51.292826, 37.823287]},
"properties": {"balloonContent": "Детские сады"},
// "options": {"iconOffset": [-24, -64], "preset": "my#kinder"}
},
{
"type": "Feature",
"id": 2,
"geometry": {"type": "Point", "coordinates": [51.291333, 37.811617]},
"properties": {"balloonContent": "Школы"},
"options": {"iconOffset": [-24, -64], "preset": "my#school"}
},
{
"type": "Feature",
"id": 12,
"geometry": {"type": "Point", "coordinates": [51.290883, 37.830311]},
"properties": {"balloonContent": "Магазины"},
"options": {"iconOffset": [-24, -64], "preset": "my#shop"}
},
{
"type": "Feature",
"id": 4,
"geometry": {"type": "Point", "coordinates": [51.284292, 37.827374]},
"properties": {"balloonContent": "Бассейны"},
"options": {"iconOffset": [-24, -64], "preset": "my#pool"}
},
{
"type": "Feature",
"id": 5,
"geometry": {"type": "Point", "coordinates": [51.292882, 37.821337]},
"properties": {"balloonContent": "Фитнес"},
"options": {"iconOffset": [-24, -64], "preset": "my#fit"}
},
{
"type": "Feature",
"id": 52,
"geometry": {"type": "Point", "coordinates": [51.290794, 37.831757]},
"properties": {"balloonContent": "Company"},
"options": {"iconOffset": [-24, -64], "preset": "my#company"}
},
]
});
// var objectState = objectManager.getObjectState(52);
// if (objectState.isClustered) {
// // Сделаем так, чтобы указанный объект был "выбран" в балуне.
// objectManager.clusters.state.set('activeObject', objectManager.objects.getById(52));
// // Все сгенерированные кластеры имеют уникальные идентификаторы.
// // Этот идентификатор нужно передать в менеджер балуна, чтобы указать,
// // на каком кластере нужно показать балун.
// objectManager.clusters.balloon.open(objectState.cluster.id);
// } else {
// objectManager.objects.balloon.open(52);
// }
var ym_checkbox_tags = {
map01_filter01:'Детские сады',
map01_filter02:'Школы',
map01_filter03:'Рестораны',
map01_filter04:'Кафе',
map01_filter05:'Магазины',
map01_filter06:'Бутики',
map01_filter08:'Бассейны',
map01_filter09:'Фитнес',
map01_filter10:'Развлечения',
map01_filter11:'Company',
};
$('.ym_filter_checkbox').on('change', function(e){
var control_set = {};
$.each(ym_checkbox_tags, function(inx, tag){
var checkbox = $('#'+inx);
if(checkbox.length > 0){
control_set[tag] = checkbox[0].checked;
}
});
listBoxControl.state.set('filters', control_set);
});
$(".all_category").click(function() {
location.reload();
});
};
</script>Ответы (1 шт):
Автор решения: Evgeny
→ Ссылка
У меток с пользовательским объектом по умолчанию нет активной области, поэтому click для вызова баллуна не срабатывает. Активную область для иконок можно задать через iconShape, у Яндекса в песочнице есть пример.