Вывод списка объектов яндекс.карты в таблицу

647

07 июня 2017, 05:30

Использую этот скрипт от API яндекс.карт. В примере используются списки, я хочу заменить на таблицу. Вот как раз в этом и прошу помощи.

В примере ниже я сделал так, что структура получилась такая:

<table>
  <tbody>
    <tr><td><a></a></td></tr>
    <tr><td><a></a></td></tr>
  </tbody>
  <tbody>
    <tr><td><a></a></td></tr>
    <tr><td><a></a></td></tr>
  </tbody>
</table>

ymaps.ready(init); 
 
function init() { 
 
    var groups = [ 
        { 
            name: "Крым", 
            style: "islands#redIcon", 
            items: [ 
                { 
                    center: [44.914680, 34.109344], 
                    name: "магазин" 
                } 
            ]}, 
        { 
            name: "Крым", 
            style: "islands#redIcon", 
            items: [ 
                { 
                    center: [44.570346, 33.461705], 
                    name: "магазин" 
                } 
            ]} 
 
    ]; 
 
    // Создание экземпляра карты. 
    var myMap = new ymaps.Map('map', { 
            center: [51.689956, 39.148313], 
            zoom: 14 
        }, { 
            searchControlProvider: 'yandex#search' 
        }), 
        // Контейнер для меню. 
        menu = $('<table class="menu"></table>'); 
 
    for (var i = 0, l = groups.length; i < l; i++) { 
        createMenuGroup(groups[i]); 
    } 
 
    function createMenuGroup (group) { 
        // Пункт меню. 
        var menuItem = $('<tbody></tbody>'), 
        // Коллекция для геообъектов группы. 
            collection = new ymaps.GeoObjectCollection(null, { preset: group.style }), 
        // Контейнер для подменю. 
            submenu = $('<tr class="submenu"></tr>'); 
 
        // Добавляем коллекцию на карту. 
        myMap.geoObjects.add(collection); 
        // Добавляем подменю. 
        menuItem 
            .append(submenu) 
            // Добавляем пункт в меню. 
            .appendTo(menu) 
            // По клику удаляем/добавляем коллекцию на карту и скрываем/отображаем подменю. 
            .find('a') 
            .bind('click', function () { 
                if (collection.getParent()) { 
                    myMap.geoObjects.remove(collection); 
                    submenu.hide(); 
                } else { 
                    myMap.geoObjects.add(collection); 
                    submenu.show(); 
                } 
            }); 
        for (var j = 0, m = group.items.length; j < m; j++) { 
            createSubMenu(group.items[j], collection, submenu); 
        } 
    } 
 
    function createSubMenu (item, collection, submenu) { 
        // Пункт подменю. 
        var submenuItem = $('<td><a href="#">' + item.name + '</a></td><td><a href="#">' + item.city + '</a></td><td><a href="#">' + item.adress + '</a></td><td><a href="#">' + item.phone + '</a></td>'), 
        // Создаем метку. 
            placemark = new ymaps.Placemark(item.center, { balloonContent: item.name }); 
 
        // Добавляем метку в коллекцию. 
        collection.add(placemark); 
        // Добавляем пункт в подменю. 
        submenuItem 
            .appendTo(submenu) 
            // При клике по пункту подменю открываем/закрываем баллун у метки. 
            .find('a') 
            .bind('click', function () { 
                if (!placemark.balloon.isOpen()) { 
                    placemark.balloon.open(); 
                } else { 
                    placemark.balloon.close(); 
                } 
                return false; 
            }); 
    } 
 
    // Добавляем меню в тэг BODY. 
    menu.appendTo($('body')); 
    // Выставляем масштаб карты чтобы были видны все группы. 
    // myMap.setBounds(myMap.geoObjects.getBounds()); 
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <title>Примеры. Список объектов карты.</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <!-- Если вы используете API локально, то в URL ресурса необходимо указывать протокол в стандартном виде (http://...)--> 
    <script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script> 
    <script src="//yandex.st/jquery/2.2.3/jquery.min.js" type="text/javascript"></script> 
    <script src="groups.js" type="text/javascript"></script> 
    <script src="list.js" type="text/javascript"></script> 
    <style type="text/css"> 
        html, body, #map { 
            width: 100%; padding: 0; margin: 0; 
            font-family: Arial; 
        } 
 
        #map { 
            height: 350px; 
            width: 800px; 
        } 
            /* Оформление меню (начало)*/ 
        .menu { 
            list-style: none; 
            padding: 5px; 
 
            margin: 0; 
        } 
        .submenu { 
            list-style: none; 
 
            margin: 0 0 0 20px; 
            padding: 0; 
        } 
        .submenu li { 
            font-size: 90%; 
        } 
            /* Оформление меню (конец)*/ 
    </style> 
</head> 
 
<body> 
<div id="map"></div> 
</body> 
 
</html>

Это, конечно, неправильно. Нужно чтобы структура получилась такая:

<table>
  <tbody>
    <tr><td><a>Строка 1</a></td><td><a>Строка 1</a></td><td><a>Строка 1</a></td></tr>
    <tr><td><a>Строка 2</a></td><td><a>Строка 2</a></td><td><a>Строка 2</a></td></tr>
    <tr><td><a>Строка 3</a></td><td><a>Строка 3</a></td><td><a>Строка 3</a></td></tr>
    <tr><td><a>Строка 4</a></td><td><a>Строка 4</a></td><td><a>Строка 4</a></td></tr>
  </tbody>
</table>

Название групп не нужны, нужны только item'ы.

Создание сайта для доставки еды в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Ограничить range slider

Не совсем получается ограничить движение маркера по слайдеру

277

javascript

Почему не удается выкачать сайт целиком?

Мне нужно выкачать этот сайт wwwrestoransmaja

326

javascript

Angular. Как отформатировать денежную сумму?

Исходное число 1000(значение value[4]), на выходе должно быть $1,00000 Прошу совета

297

javascript

Ускорение работы приложения

Есть приложение на js + jquery + php, которые считает большие таблицы данных , с поиском совпадений и прочим, что в свою очередь приводит к большой...

281