Как показать элементы под картой
Как показать элементы под картой при выборе города что бы показались нужные блоки (display:none убралось)
ymaps.ready(init);
function init () {
var myMap = new ymaps.Map('map', {
center: [43.797273, 131.951780],
zoom: 13,
controls: []
}),
// Создадим собственный макет выпадающего списка.
ListBoxLayout = ymaps.templateLayoutFactory.createClass(
"<button id='my-listbox-header' class='btn btn-success dropdown-toggle' data-toggle='dropdown'>" +
"{{data.title}} <span class='caret'></span>" +
"</button>" +
// Этот элемент будет служить контейнером для элементов списка.
// В зависимости от того, свернут или развернут список, этот контейнер будет
// скрываться или показываться вместе с дочерними элементами.
"<ul id='my-listbox'" +
" class='dropdown-menu' role='menu' aria-labelledby='dropdownMenu'" +
" style='display: {% if state.expanded %}block{% else %}none{% endif %};'></ul>", {
build: function() {
// Вызываем метод build родительского класса перед выполнением
// дополнительных действий.
ListBoxLayout.superclass.build.call(this);
this.childContainerElement = $('#my-listbox').get(0);
// Генерируем специальное событие, оповещающее элемент управления
// о смене контейнера дочерних элементов.
this.events.fire('childcontainerchange', {
newChildContainerElement: this.childContainerElement,
oldChildContainerElement: null
});
},
// Переопределяем интерфейсный метод, возвращающий ссылку на
// контейнер дочерних элементов.
getChildContainerElement: function () {
return this.childContainerElement;
},
clear: function () {
// Заставим элемент управления перед очисткой макета
// откреплять дочерние элементы от родительского.
// Это защитит нас от неожиданных ошибок,
// связанных с уничтожением dom-элементов в ранних версиях ie.
this.events.fire('childcontainerchange', {
newChildContainerElement: null,
oldChildContainerElement: this.childContainerElement
});
this.childContainerElement = null;
// Вызываем метод clear родительского класса после выполнения
// дополнительных действий.
ListBoxLayout.superclass.clear.call(this);
}
}),
// Также создадим макет для отдельного элемента списка.
ListBoxItemLayout = ymaps.templateLayoutFactory.createClass(
"<li><a>{{data.content}}</a></li>"
),
// Создадим 2 пункта выпадающего списка
listBoxItems = [
new ymaps.control.ListBoxItem({
data: {
content: 'Владивосток',
center: [43.115536, 131.885485],
zoom: 13
}
}),
new ymaps.control.ListBoxItem({
data: {
content: 'Уссурийск',
center: [43.797273, 131.951780],
zoom: 13
}
})
],
// Теперь создадим список, содержащий 2 пункта.
listBox = new ymaps.control.ListBox({
items: listBoxItems,
data: {
title: 'Выберите город'
},
options: {
// С помощью опций можно задать как макет непосредственно для списка,
layout: ListBoxLayout,
// так и макет для дочерних элементов списка. Для задания опций дочерних
// элементов через родительский элемент необходимо добавлять префикс
// 'item' к названиям опций.
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'});
myMap.geoObjects
.add(new ymaps.Placemark([43.810974, 131.954377], {
balloonContent: '<strong>Торгово-Технический центр «Маленькая Япония»</strong><br/>г.Уссурийск, Краснознамённая улица, 196',
iconCaption: 'Торгово-Технический центр «Маленькая Япония»'
}, {
preset: 'islands#greenDotIconWithCaption'
}))
.add(new ymaps.Placemark([43.808756, 131.955428], {
balloonContent: '<strong>Автомагазин «Форвард»</strong><br/>г.Уссурийск, Краснознамённая улица, 186',
iconCaption: 'Автомагазин «Форвард»'
}, {
preset: 'islands#greenDotIconWithCaption'
}))
.add(new ymaps.Placemark([43.786770, 131.951502], {
balloonContent: '<strong>Автомагазин «Токио»</strong><br/>г.Уссурийск, Некрасова, 3',
iconCaption: 'Автомагазин «Токио»'
}, {
preset: 'islands#greenDotIconWithCaption'
}));
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/name.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script src="https://yandex.st/jquery/2.2.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/name.js"></script>
</head>
<body>
<div id="map"></div>
<div id="vlad">Владивосток</div>
<div id="yssr">Уссурийск</div>
</body>
</html>
если платно то напишите сколько стоит. Спасибо. |
Раз 10 прочитал, не понял что нужно...
Как город выбирается? Какие элементы нужно отобразить? При чем тут карта? |
Так?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html, body {
width: 100%; height: 100%; padding: 0; margin: 0;
}
#map {
width: 100%; height: 80%; padding: 0; margin: 0;
}
</style>
<script src="https://yandex.st/jquery/2.2.3/jquery.min.js" type="text/javascript"></script>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script type="text/javascript"></script>
</head>
<body>
<div id="map"></div>
<div id="vlad" class="city" style="display:none;">Владивосток</div>
<div id="yssr" class="city" style="display:none;">Уссурийск</div>
<script type="text/javascript">
ymaps.ready(init);
function init () {
var myMap = new ymaps.Map('map', {
center: [43.797273, 131.951780],
zoom: 13,
controls: []
}),
// Создадим собственный макет выпадающего списка.
ListBoxLayout = ymaps.templateLayoutFactory.createClass(
"<button id='my-listbox-header' class='btn btn-success dropdown-toggle' data-toggle='dropdown'>" +
"{{data.title}} <span class='caret'></span>" +
"</button>" +
// Этот элемент будет служить контейнером для элементов списка.
// В зависимости от того, свернут или развернут список, этот контейнер будет
// скрываться или показываться вместе с дочерними элементами.
"<ul id='my-listbox'" +
" class='dropdown-menu' role='menu' aria-labelledby='dropdownMenu'" +
" style='display: block;'></ul>", {
build: function() {
// Вызываем метод build родительского класса перед выполнением
// дополнительных действий.
ListBoxLayout.superclass.build.call(this);
this.childContainerElement = $('#my-listbox').get(0);
// Генерируем специальное событие, оповещающее элемент управления
// о смене контейнера дочерних элементов.
this.events.fire('childcontainerchange', {
newChildContainerElement: this.childContainerElement,
oldChildContainerElement: null
});
},
// Переопределяем интерфейсный метод, возвращающий ссылку на
// контейнер дочерних элементов.
getChildContainerElement: function () {
return this.childContainerElement;
},
clear: function () {
// Заставим элемент управления перед очисткой макета
// откреплять дочерние элементы от родительского.
// Это защитит нас от неожиданных ошибок,
// связанных с уничтожением dom-элементов в ранних версиях ie.
this.events.fire('childcontainerchange', {
newChildContainerElement: null,
oldChildContainerElement: this.childContainerElement
});
this.childContainerElement = null;
// Вызываем метод clear родительского класса после выполнения
// дополнительных действий.
ListBoxLayout.superclass.clear.call(this);
}
}),
// Также создадим макет для отдельного элемента списка.
ListBoxItemLayout = ymaps.templateLayoutFactory.createClass(
"<li><a>{{data.content}}</a></li>"
),
// Создадим 2 пункта выпадающего списка
listBoxItems = [
new ymaps.control.ListBoxItem({
data: {
content: 'Владивосток',
id:"vlad",
center: [43.115536, 131.885485],
zoom: 13
}
}),
new ymaps.control.ListBoxItem({
data: {
content: 'Уссурийск',
id:"yssr",
center: [43.797273, 131.951780],
zoom: 13
}
})
],
// Теперь создадим список, содержащий 2 пункта.
listBox = new ymaps.control.ListBox({
items: listBoxItems,
data: {
title: 'Выберите город'
},
options: {
// С помощью опций можно задать как макет непосредственно для списка,
layout: ListBoxLayout,
// так и макет для дочерних элементов списка. Для задания опций дочерних
// элементов через родительский элемент необходимо добавлять префикс
// 'item' к названиям опций.
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')
);
};
$('.city').hide();
$('#' + item.data.get('id')).show();
});
myMap.controls.add(listBox, {float: 'left'});
myMap.geoObjects
.add(new ymaps.Placemark([43.810974, 131.954377], {
balloonContent: '<strong>Торгово-Технический центр «Маленькая Япония»</strong><br/>г.Уссурийск, Краснознамённая улица, 196',
iconCaption: 'Торгово-Технический центр «Маленькая Япония»'
}, {
preset: 'islands#greenDotIconWithCaption'
}))
.add(new ymaps.Placemark([43.808756, 131.955428], {
balloonContent: '<strong>Автомагазин «Форвард»</strong><br/>г.Уссурийск, Краснознамённая улица, 186',
iconCaption: 'Автомагазин «Форвард»'
}, {
preset: 'islands#greenDotIconWithCaption'
}))
.add(new ymaps.Placemark([43.786770, 131.951502], {
balloonContent: '<strong>Автомагазин «Токио»</strong><br/>г.Уссурийск, Некрасова, 3',
iconCaption: 'Автомагазин «Токио»'
}, {
preset: 'islands#greenDotIconWithCaption'
}));
}</script>
</body>
</html>
|
Спасибо. Все гениальное просто!!! Точно профи!
|
| Часовой пояс GMT +3, время: 10:00. |