1

В >>>ПРИМЕРЕ<<< карта растянута на весь экран и список объектов в низу под картой. Я пытаюсь сделать несколько карт с левой стороны и список с правой. Карты сделал, а вот список не могу сделать с правой стороны. Уже через таблицу пытался без успешно.

// Как только будет загружен API и готов DOM, выполняем инициализацию
ymaps.ready(init);

function init() {
  // Создание экземпляра карты и его привязка к контейнеру с
  // заданным id ("map")
  var myMap = new ymaps.Map('map1', {
    // При инициализации карты, обязательно нужно указать
    // ее центр и коэффициент масштабирования
    center: [69.34578004, 88.18383015],
    behaviors: ['default', 'scrollZoom'],
    zoom: 11
  });
  // Создание экземпляра карты и его привязка к контейнеру с
  // заданным id ("map")	
  var myMap = new ymaps.Map('map2', {
    // При инициализации карты, обязательно нужно указать
    // ее центр и коэффициент масштабирования
    center: [69.35069841, 87.75575661],
    behaviors: ['default', 'scrollZoom'],
    zoom: 14
  });
  // Создание экземпляра карты и его привязка к контейнеру с
  // заданным id ("map")
  var myMap = new ymaps.Map('map3', {
    // При инициализации карты, обязательно нужно указать
    // ее центр и коэффициент масштабирования
    center: [69.49181393, 88.38485800],
    behaviors: ['default', 'scrollZoom'],
    zoom: 13
  });
  // Создание экземпляра карты и его привязка к контейнеру с
  // заданным id ("map")
  var myMap = new ymaps.Map('map4', {
    // При инициализации карты, обязательно нужно указать
    // ее центр и коэффициент масштабирования
    center: [68.09471301, 87.79412227],
    behaviors: ['default', 'scrollZoom'],
    zoom: 15
  });
  // Контейнер для меню.
  menu = $('<ul class="menu"></ul>');

  for (var i = 0, l = groups.length; i < l; i++) {
    createMenuGroup(groups[i]);
  }

  function createMenuGroup(group) {
    // Пункт меню.
    var menuItem = $('<ul><a href="#">' + group.name + '</a></ul>'),
      // Коллекция для геообъектов группы.
      collection = new ymaps.GeoObjectCollection(null, {
        preset: group.style
      }),
      // Контейнер для подменю.
      submenu = $('<ul class="submenu"></ul>');

    // Добавляем коллекцию на карту.
    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 = $('<li><a href="#">' + item.name + '</a></li>'),
      // Создаем метку.
      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'));
}
// Группы объектов
var groups = [{
    name: "Лицеи",
    style: "islands#redCircleIcon",
    items: [{
        center: [69.34579180, 88.19180375],
        name: "МБОУ «Лицей № 3»(корпус №1)"
      },
      {
        center: [69.34526911, 88.19182521],
        name: "МБОУ «Лицей № 3»(корпус №2)"
      }
    ]
  },
  {
    name: "Гимназии",
    style: "islands#orangeCircleDotIcon",
    items: [{
        center: [69.34753557, 88.21785750],
        name: "МБОУ «Гимназия №1»(корпус №1)"
      },
      {
        center: [69.34814152, 88.21667733],
        name: "МБОУ «Гимназия №1»(корпус №2)"
      },
      {
        center: [69.34769463, 88.21699919],
        name: "МБОУ «Гимназия №1»(корпус №3)"
      },
      {
        center: [69.34328546, 88.21759563],
        name: "МАОУ «Гимназия № 4»(корпус №1)"
      },
      {
        center: [69.34301272, 88.21544986],
        name: "МАОУ «Гимназия № 4»(корпус №2)"
      },
      {
        center: [69.34676615, 88.21196658],
        name: "МБОУ «Гимназия №5»(корпус №1)"
      },
      {
        center: [69.34274431, 88.23068347],
        name: "МБОУ «Гимназия №5»(корпус №2)"
      },
      {
        center: [69.35467955, 88.18355100],
        name: "МБОУ «Гимназия № 7»(корпус №1)"
      },
      {
        center: [69.35375575, 88.18524616],
        name: "МБОУ «Гимназия № 7»(корпус №2)"
      },
      {
        center: [69.35096378, 87.76028646],
        name: "МБОУ «Гимназия №11»"
      },
      {
        center: [69.49001555, 88.38055567],
        name: "МАОУ «Гимназия №48»"
      }
    ]
  },
];
body {
  margin: 0 auto;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  position: relative;
  line-height: 1;
  -webkit-background-size: cover;
  /* Для хрома */
  -moz-background-size: cover;
  /* Для лисы*/
  -o-background-size: cover;
  /* Для оперы*/
  -ms-background-size: cover;
  /* Для ИЭ*/
  background-size: cover;
  /* Для закрипления*/
}

div {
  box-sizing: border-box;
}

#page-wrapper {
  width: 99.7%;
  font: 100%/1.4em, Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  width: 98%;
  min-height: 202px;
  /*border*/
  border-top: 22px solid #000;
  border-bottom: 13px solid #000;
  border-left: 21.5px solid #000;
  border-right: 22px solid #000;
  margin: 0 auto;
  /*border ends*/
}

.container {
  max-width: 800px;
  margin: 0 auto;
}

.title2 {
  margin-top: 4px;
  margin-left: 0px;
  padding-right: 14px;
  font-size: 36px;
  font-family: Impact, sans-serif;
  color: #000000;
  text-shadow: 0px 4px rgba(0, 0, 0, .34);
  text-align: center;
}

h1 {
  font-size: 17px;
  font-family: Lobster, sans-serif;
  letter-spacing: 1px;
  font-weight: normal;
  color: #fff;
  text-align: center;
  margin-top: 2px;
  margin-right: 8px;
}

.title1 {
  font-size: 18px;
  color: #000000;
  font-family: Impact, sans-serif;
  text-shadow: 1px 0.5px 3px rgba(255, 255, 255, 0.6);
  background-color: #666666;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  letter-spacing: -0.55px;
  text-align: center;
  margin-top: 0.5px;
  margin-left: 0px;
  padding-right: 3px;
}

#blok1 {
  border: 1px solid red;
  width: 700px;
  height: 1450px;
  margin: 0px 100px 100px;
  float: right;
  padding: 3;
}

#blok2 {
  border: 1px solid red;
  width: 700px;
  height: 1450px;
  margin: 0px 100px 100px;
  padding: 3;
}


/* Оформление меню (начало)*/

#menu {
  list-style: none;
  padding: 0px;
  color: #04b;
  /* Цвет ссылки */
}

#menu a {
  tex-decoration: none;
  border-bottom: dashed 1px;
}

.menu a:hover {
  background: #faf3d2;
  /* Цвет фона под ссылкой */
  color: #800000;
  /* Новый цвет ссылки */
  border: 1px dashed #634f36/* Рамка вокруг ссылки */
}

#submenu {
  list-style: none;
  margin: 0 0 0 10px;
  padding: 0;
}

#footer {
  width: 100%;
  height: 30px;
  background: #5d5d5d;
  margin: 0 auto;
  bottom: 0px;
  padding: 0 50px;
}

#footer h1 {
  text-align: center;
  font-size: 18px;
}

.submenu li {
  font-size: 80%;
}

a {
  color: #000000;
  /* Цвет ссылки */
  text-decoration: none;
  /* Убираем подчеркивание у ссылок */
}

a.active {
  color: #000;
}

a:hover {
  color: #f50000;
  /* Цвет ссылки при наведении на нее курсора мыши */
}


/* Оформление меню (конец)*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trancitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Интерактивная карта</title>

  <style type="text/css">
    body {
      background-color: #87cefa;
      background-size: auto;
      background-position: absolute;
    }
    
    a {
      color: #000000;
    }
  </style>
  <!-- Подключаем API  карт 2.x  -->
  <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 src="maps.js" type="text/javascript"></script>
  <link rel="stylesheet" href="my.css" type="text/css" />
</head>

<body>
  <div id="page-wrapper">
    <header class="clearfix">
      <div id="container">
        <div id="header">
          <div class="title2">Интерактивная карта</div>
          <div class="title1">
            <a href="http://" target="_blank">
              <h1>Программы</h1>
            </a>
          </div>
          <div id="sidebar">
            <div id="blok1">
              <div id="menu">Учреждения</div>
            </div>
          </div>
          <div id="content">
            <div id="blok2">
              <div id="map1" style="margin: 0px 50px 50px; width: 600px; height: 300px; padding: 0;">
                <h4 align="center">Норильск</h4>
              </div>
              <div id="map2" style="margin: 0px 50px 50px; width: 600px; height: 300px; padding: 0;">
                <h4 align="center">Кайеркан</h4>
              </div>
              <div id="map3" style="margin: 0px 50px 50px; width: 600px; height: 300px; padding: 0;">
                <h4 align="center">Талнах</h4>
              </div>
              <div id="map4" style="margin: 0px 50px 50px; width: 600px; height: 300px; padding: 0;">
                <h4 align="center">Снежногорск</h4>
              </div>
            </div>
          </div>
        </div>
        <div id="footer">
          <div>
            <h1 style="text-align: center;"><a href="http://" target="_blank">&copy; Управление</a></h1>
          </div>
        </div>
      </div>
</body>

</html>

4

1 ответ 1

0

Замените menu.appendTo($('body')); на menu.appendTo($('#menu'));

// Как только будет загружен API и готов DOM, выполняем инициализацию
ymaps.ready(init);

function init() {
  // Создание экземпляра карты и его привязка к контейнеру с
  // заданным id ("map")
  var myMap = new ymaps.Map('map1', {
    // При инициализации карты, обязательно нужно указать
    // ее центр и коэффициент масштабирования
    center: [69.34578004, 88.18383015],
    behaviors: ['default', 'scrollZoom'],
    zoom: 11
  });
  // Создание экземпляра карты и его привязка к контейнеру с
  // заданным id ("map")    
  var myMap = new ymaps.Map('map2', {
    // При инициализации карты, обязательно нужно указать
    // ее центр и коэффициент масштабирования
    center: [69.35069841, 87.75575661],
    behaviors: ['default', 'scrollZoom'],
    zoom: 14
  });
  // Создание экземпляра карты и его привязка к контейнеру с
  // заданным id ("map")
  var myMap = new ymaps.Map('map3', {
    // При инициализации карты, обязательно нужно указать
    // ее центр и коэффициент масштабирования
    center: [69.49181393, 88.38485800],
    behaviors: ['default', 'scrollZoom'],
    zoom: 13
  });
  // Создание экземпляра карты и его привязка к контейнеру с
  // заданным id ("map")
  var myMap = new ymaps.Map('map4', {
    // При инициализации карты, обязательно нужно указать
    // ее центр и коэффициент масштабирования
    center: [68.09471301, 87.79412227],
    behaviors: ['default', 'scrollZoom'],
    zoom: 15
  });
  // Контейнер для меню.
  menu = $('<ul class="menu"></ul>');

  for (var i = 0, l = groups.length; i < l; i++) {
    createMenuGroup(groups[i]);
  }

  function createMenuGroup(group) {
    // Пункт меню.
    var menuItem = $('<ul><a href="#">' + group.name + '</a></ul>'),
      // Коллекция для геообъектов группы.
      collection = new ymaps.GeoObjectCollection(null, {
        preset: group.style
      }),
      // Контейнер для подменю.
      submenu = $('<ul class="submenu"></ul>');

    // Добавляем коллекцию на карту.
    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 = $('<li><a href="#">' + item.name + '</a></li>'),
      // Создаем метку.
      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($('#menu'));
}
// Группы объектов
var groups = [{
    name: "Лицеи",
    style: "islands#redCircleIcon",
    items: [{
        center: [69.34579180, 88.19180375],
        name: "МБОУ «Лицей № 3»(корпус №1)"
      },
      {
        center: [69.34526911, 88.19182521],
        name: "МБОУ «Лицей № 3»(корпус №2)"
      }
    ]
  },
  {
    name: "Гимназии",
    style: "islands#orangeCircleDotIcon",
    items: [{
        center: [69.34753557, 88.21785750],
        name: "МБОУ «Гимназия №1»(корпус №1)"
      },
      {
        center: [69.34814152, 88.21667733],
        name: "МБОУ «Гимназия №1»(корпус №2)"
      },
      {
        center: [69.34769463, 88.21699919],
        name: "МБОУ «Гимназия №1»(корпус №3)"
      },
      {
        center: [69.34328546, 88.21759563],
        name: "МАОУ «Гимназия № 4»(корпус №1)"
      },
      {
        center: [69.34301272, 88.21544986],
        name: "МАОУ «Гимназия № 4»(корпус №2)"
      },
      {
        center: [69.34676615, 88.21196658],
        name: "МБОУ «Гимназия №5»(корпус №1)"
      },
      {
        center: [69.34274431, 88.23068347],
        name: "МБОУ «Гимназия №5»(корпус №2)"
      },
      {
        center: [69.35467955, 88.18355100],
        name: "МБОУ «Гимназия № 7»(корпус №1)"
      },
      {
        center: [69.35375575, 88.18524616],
        name: "МБОУ «Гимназия № 7»(корпус №2)"
      },
      {
        center: [69.35096378, 87.76028646],
        name: "МБОУ «Гимназия №11»"
      },
      {
        center: [69.49001555, 88.38055567],
        name: "МАОУ «Гимназия №48»"
      }
    ]
  },
];
body {
  margin: 0 auto;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  position: relative;
  line-height: 1;
  -webkit-background-size: cover;
  /* Для хрома */
  -moz-background-size: cover;
  /* Для лисы*/
  -o-background-size: cover;
  /* Для оперы*/
  -ms-background-size: cover;
  /* Для ИЭ*/
  background-size: cover;
  /* Для закрипления*/
}

div {
  box-sizing: border-box;
}

#page-wrapper {
  width: 99.7%;
  font: 100%/1.4em, Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  width: 98%;
  min-height: 202px;
  /*border*/
  border-top: 22px solid #000;
  border-bottom: 13px solid #000;
  border-left: 21.5px solid #000;
  border-right: 22px solid #000;
  margin: 0 auto;
  /*border ends*/
}

.container {
  max-width: 800px;
  margin: 0 auto;
}

.title2 {
  margin-top: 4px;
  margin-left: 0px;
  padding-right: 14px;
  font-size: 36px;
  font-family: Impact, sans-serif;
  color: #000000;
  text-shadow: 0px 4px rgba(0, 0, 0, .34);
  text-align: center;
}

h1 {
  font-size: 17px;
  font-family: Lobster, sans-serif;
  letter-spacing: 1px;
  font-weight: normal;
  color: #fff;
  text-align: center;
  margin-top: 2px;
  margin-right: 8px;
}

.title1 {
  font-size: 18px;
  color: #000000;
  font-family: Impact, sans-serif;
  text-shadow: 1px 0.5px 3px rgba(255, 255, 255, 0.6);
  background-color: #666666;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  letter-spacing: -0.55px;
  text-align: center;
  margin-top: 0.5px;
  margin-left: 0px;
  padding-right: 3px;
}

#blok1 {
  border: 1px solid red;
  width: 700px;
  height: 1450px;
  margin: 0px 100px 100px;
  float: right;
  padding: 3;
}

#blok2 {
  border: 1px solid red;
  width: 700px;
  height: 1450px;
  margin: 0px 100px 100px;
  padding: 3;
}


/* Оформление меню (начало)*/

#menu {
  list-style: none;
  padding: 0px;
  color: #04b;
  /* Цвет ссылки */
}

#menu a {
  tex-decoration: none;
  border-bottom: dashed 1px;
}

.menu a:hover {
  background: #faf3d2;
  /* Цвет фона под ссылкой */
  color: #800000;
  /* Новый цвет ссылки */
  border: 1px dashed #634f36/* Рамка вокруг ссылки */
}

#submenu {
  list-style: none;
  margin: 0 0 0 10px;
  padding: 0;
}

#footer {
  width: 100%;
  height: 30px;
  background: #5d5d5d;
  margin: 0 auto;
  bottom: 0px;
  padding: 0 50px;
}

#footer h1 {
  text-align: center;
  font-size: 18px;
}

.submenu li {
  font-size: 80%;
}

a {
  color: #000000;
  /* Цвет ссылки */
  text-decoration: none;
  /* Убираем подчеркивание у ссылок */
}

a.active {
  color: #000;
}

a:hover {
  color: #f50000;
  /* Цвет ссылки при наведении на нее курсора мыши */
}


/* Оформление меню (конец)*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trancitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Интерактивная карта</title>

  <style type="text/css">
    body {
      background-color: #87cefa;
      background-size: auto;
      background-position: absolute;
    }
    
    a {
      color: #000000;
    }
  </style>
  <!-- Подключаем API  карт 2.x  -->
  <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 src="maps.js" type="text/javascript"></script>
  <link rel="stylesheet" href="my.css" type="text/css" />
</head>

<body>
  <div id="page-wrapper">
    <header class="clearfix">
      <div id="container">
        <div id="header">
          <div class="title2">Интерактивная карта</div>
          <div class="title1">
            <a href="http://" target="_blank">
              <h1>Программы</h1>
            </a>
          </div>
          <div id="sidebar">
            <div id="blok1">
              <div id="menu">Учреждения</div>
            </div>
          </div>
          <div id="content">
            <div id="blok2">
              <div id="map1" style="margin: 0px 50px 50px; width: 600px; height: 300px; padding: 0;">
                <h4 align="center">Норильск</h4>
              </div>
              <div id="map2" style="margin: 0px 50px 50px; width: 600px; height: 300px; padding: 0;">
                <h4 align="center">Кайеркан</h4>
              </div>
              <div id="map3" style="margin: 0px 50px 50px; width: 600px; height: 300px; padding: 0;">
                <h4 align="center">Талнах</h4>
              </div>
              <div id="map4" style="margin: 0px 50px 50px; width: 600px; height: 300px; padding: 0;">
                <h4 align="center">Снежногорск</h4>
              </div>
            </div>
          </div>
        </div>
        <div id="footer">
          <div>
            <h1 style="text-align: center;"><a href="http://" target="_blank">&copy; Управление</a></h1>
          </div>
        </div>
      </div>
</body>

</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.