Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.07.2018, 10:48
Аспирант
Отправить личное сообщение для zava75 Посмотреть профиль Найти все сообщения от zava75
 
Регистрация: 13.07.2018
Сообщений: 34

Как показать элементы под картой
Как показать элементы под картой при выборе города что бы показались нужные блоки (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>

если платно то напишите сколько стоит. Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 13.07.2018, 11:42
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,793

Раз 10 прочитал, не понял что нужно...
Как город выбирается?
Какие элементы нужно отобразить?
При чем тут карта?
Ответить с цитированием
  #3 (permalink)  
Старый 13.07.2018, 12:06
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Так?
<!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>

Последний раз редактировалось Dilettante_Pro, 13.07.2018 в 13:30.
Ответить с цитированием
  #4 (permalink)  
Старый 13.07.2018, 18:48
Аспирант
Отправить личное сообщение для zava75 Посмотреть профиль Найти все сообщения от zava75
 
Регистрация: 13.07.2018
Сообщений: 34

Спасибо. Все гениальное просто!!! Точно профи!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как выровнять по высоте элементы li при изменении ширины? malsyst jQuery 12 22.01.2016 16:54
как вывести элементы массива с интнрвалом времени ArturZhir Javascript под браузер 1 24.07.2015 16:23
Как выровнять элементы li в jquery ui tabs? 1Dmitry Элементы интерфейса 2 23.03.2013 14:58
как реализовать задачу? (автокомплит и много инпутов из под дома) h-zone jQuery 1 06.11.2009 20:09
Как писать скрипты под Opera? ucsus (X)HTML/CSS 2 15.04.2009 13:07