ymaps.ready(init);
function init () {
var myMap = new ymaps.Map("map", {
center: [61.664933, 97.147004],
zoom: 3,
controls: []
}, {
searchControlProvider: 'yandex#search'
}),
placemark = new ymaps.Placemark([46.378052, 48.048819], {
iconContent: "тест1",
hintContent: "Кликните, чтобы узнать адрес"
}, {
balloonPanelMaxMapArea: 0,
draggable: "true",
preset: "islands#brownStretchyIcon",
openEmptyBalloon: true
});
placemark2 = new ymaps.Placemark([43.177530, 131.915506], {
iconContent: "тест2",
hintContent: "Кликните, чтобы узнать адрес"
}, {
balloonPanelMaxMapArea: 0,
draggable: "true",
preset: "islands#brownStretchyIcon",
openEmptyBalloon: true
});
placemark3 = new ymaps.Placemark([51.677080, 39.170751], {
iconContent: "Тест 3",
hintContent: "Кликните, чтобы узнать адрес"
}, {
balloonPanelMaxMapArea: 0,
draggable: "true",
preset: "islands#brownStretchyIcon",
openEmptyBalloon: true
});
placemark.events.add('balloonopen', function (e) {
placemark.properties.set('balloonContent', "Идет загрузка данных...");
setTimeout(function () {
ymaps.geocode(placemark.geometry.getCoordinates(), {
results: 1
}).then(function (res) {
var newContent = res.geoObjects.get(0) ?
res.geoObjects.get(0).properties.get('name') :
'Не удалось определить адрес.';
placemark.properties.set('balloonContent', newContent);
});
}, 1500);
});
myMap.geoObjects.add(placemark);
placemark2.events.add('balloonopen', function (e) {
placemark2.properties.set('balloonContent', "Идет загрузка данных...");
setTimeout(function () {
ymaps.geocode(placemark2.geometry.getCoordinates(), {
results: 1
}).then(function (res) {
var newContent = res.geoObjects.get(0) ?
res.geoObjects.get(0).properties.get('name') :
'Не удалось определить адрес.';
placemark2.properties.set('balloonContent', newContent);
});
}, 1500);
});
myMap.geoObjects.add(placemark2);
placemark3.events.add('balloonopen', function (e) {
placemark3.properties.set('balloonContent', "Идет загрузка данных...");
setTimeout(function () {
ymaps.geocode(placemark3.geometry.getCoordinates(), {
results: 1
}).then(function (res) {
var newContent = res.geoObjects.get(0) ?
res.geoObjects.get(0).properties.get('name') :
'Не удалось определить адрес.';
placemark3.properties.set('balloonContent', newContent);
});
}, 1500);
});
myMap.geoObjects.add(placemark3);
ListBoxLayout = ymaps.templateLayoutFactory.createClass(
"<button id='my-listbox-header' class='btn btn--primary dropdown-toggle' data-toggle='dropdown'>" +
"{{data.title}} <span class='caret'></span>" +
"</button>" +
"<ul id='my-listbox'" +
" class='dropdown-yandex' role='menu' aria-labelledby='dropdownMenu'" +
" style='display: {% if state.expanded %}block{% else %}none{% endif %};'></ul>", {
build: function() {
ListBoxLayout.superclass.build.call(this);
this.childContainerElement = $('#my-cities').get(0);
this.events.fire('childcontainerchange', {
newChildContainerElement: this.childContainerElement,
oldChildContainerElement: null
});
},
getChildContainerElement: function () {
return this.childContainerElement;
},
clear: function () {
this.events.fire('childcontainerchange', {
newChildContainerElement: null,
oldChildContainerElement: this.childContainerElement
});
this.childContainerElement = null;
ListBoxLayout.superclass.clear.call(this);
}
}),
ListBoxItemLayout = ymaps.templateLayoutFactory.createClass(
"<option value='{{data.content}}'>{{data.content}}</option>"
),
listBoxItems = [
new ymaps.control.ListBoxItem({
data: {
content: 'Воронеж',
center: [51.677080, 39.170751],
zoom: 13
}
}),
new ymaps.control.ListBoxItem({
data: {
content: 'Владивосток',
center: [43.177530, 131.915506],
zoom: 13
}
}),
new ymaps.control.ListBoxItem({
data: {
content: 'Астрахань',
center: [46.378052, 48.048819],
zoom: 13
}
}),
],
listBox = new ymaps.control.ListBox({
items: listBoxItems,
data: {
title: 'Выберите город'
},
options: {
layout: ListBoxLayout,
itemLayout: ListBoxItemLayout
}
});
listBox.events.add('click', function (e) {
var item = e.get('target');
if (item != listBox) {
myMap.setCenter(
item.data.get('center'),
item.data.get('zoom')
);
}
});
myMap.controls.add(listBox, {float: 'left'});
placemark.events
.add('mouseenter', function (e) {
e.get('target').options.set('preset', 'islands#blueStretchyIcon');
})
.add('mouseleave', function (e) {
e.get('target').options.set('preset', 'islands#brownStretchyIcon');
});
placemark2.events
.add('mouseenter', function (e) {
e.get('target').options.set('preset', 'islands#greenStretchyIcon');
})
.add('mouseleave', function (e) {
e.get('target').options.set('preset', 'islands#brownStretchyIcon');
});
placemark3.events
.add('mouseenter', function (e) {
e.get('target').options.set('preset', 'islands#redStretchyIcon');
})
.add('mouseleave', function (e) {
e.get('target').options.set('preset', 'islands#brownStretchyIcon');
});
array(6) {
["ITEMS"]=> array(4) {
[11607]=> array(136) {
["ID"]=> int(11607)
["~ID"]=> string(5) "11607"
["IBLOCK_ID"]=> string(1) "2"
["~IBLOCK_ID"]=> string(1) "2"
["CODE"]=> string(47)
...<? foreach($arResult['ITEMS'] as $item): ?>
<td width="168" height="168">
<a href="<?=$item['DETAIL_PAGE_URL']?>">
<img src="<?=$item['MORE_PHOTO'];?>" style="display: block; margin: auto">
</a>
</td>
Ваш код выглядит рабочим, но у меня не сработал в таком виде.
Работает так: