Клуб API Карт

Проблема со вкладками

SaraLeeAnn
17 апреля 2013, 12:16

Добрый день! Появилась проблема с использованием Яндекс Карт, в поиске решения не нашла плэтому выношу проблему здесь: есть задача использовать несколько карт на одной странице, но чтобы были видны не все сразу, поэтому были созданы вкладки, в каждой вкладке по карте. Проблема в том, что данный код отработал всего 1 раз, открыл первую вкладку с картой, вторую уже не открыл, т.е. вкладку открыл, но карту не показывает. При обновлении страницы полностью перестал отображать карты, подскажите, в чем может быть проблема, код вроде бы элементарный...

  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<script type="text/javascript"> //<![CDATA[
 var abv = "HTML";
 function vkladki(x,y) {
 var mostrar = document.getElementById(x);
 var actual = document.getElementById(abv);
 if(mostrar==actual) {return false;}
 actual.className="skryt";
 mostrar.className="vid";
 abv = x;
 document.getElementById('vkladka1').style.borderBottomColor='#e1e1e1';
 if (self.ramka) ramka.style.borderBottomColor = '#e1e1e1';
 y.style.borderBottomColor = '#fff'; ramka = y;
}
//]]> </script>
<style type="text/css">
p {text-indent:25px;}

.korpus > a {
 
  padding: 2px 5px;
  border: 1px solid #e1e1e1;
  line-height: 20px;
}
.korpus > a:first-child { border-bottom: 1px solid #fff; }
.korpus > a:hover { text-decoration: none; }
.korpus div {
  border: 1px solid #e1e1e1;
  padding: 5px;
  width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
  }
.korpus .vid { display: block; }
.korpus .skryt { display: none; }
</style>
</head>
<body>
<br>

<div class="korpus">
<a onclick="vkladki('HTML',this);" href="javascript:void(0);" id="vkladka1"> </a>
<a onclick="vkladki('Нижний',this);" href="javascript:void(0);">Нижний Новгород</a>
<a onclick="vkladki('Калуга',this);" href="javascript:void(0);">Калуга</a>
<a onclick="vkladki('Ярославль',this);" href="javascript:void(0);">Ярославль</a>
<a onclick="vkladki('Орел',this);" href="javascript:void(0);">Орел</a>
<a onclick="vkladki('Тверь',this);" href="javascript:void(0);">Тверь</a>
<a onclick="vkladki('Тюмень',this);" href="javascript:void(0);">Тюмень</a>
<a onclick="vkladki('Челябинск',this);" href="javascript:void(0);">Челябинск</a>
<a onclick="vkladki('Екатеринбург',this);" href="javascript:void(0);">Екатеринбург</a>

<div id="HTML" class="vid">Выберете Ваш город для получения информации</div>
<div id="Нижний" class="skryt"><script type="text/javascript" charset="utf-8" src="//api-maps.yandex.ru/services/constructor/1.0/js/?sid=xOy4QrqbGb1Jpi3Mcm_dXPDPY6OVlCIt&width=600&height=450"></script></div>
<div id="Калуга" class="skryt"><script type="text/javascript" charset="utf-8" src="//api-maps.yandex.ru/services/constructor/1.0/js/?sid=xOy4QrqbGb1Jpi3Mcm_dXPDPY6OVlCIt&width=600&height=450"></script></div>
<div id="Ярославль" class="skryt"><script type="text/javascript" charset="utf-8" src="//api-maps.yandex.ru/services/constructor/1.0/js/?sid=T_-9d-rmFusELKzpwQvE8P5SQmz8gD66&width=600&height=450"></script></div>
<div id="Орел" class="skryt"><script type="text/javascript" charset="utf-8" src="//api-maps.yandex.ru/services/constructor/1.0/js/?sid=T_-9d-rmFusELKzpwQvE8P5SQmz8gD66&width=600&height=450"></script></div>
<div id="Тверь" class="skryt"><script type="text/javascript" charset="utf-8" src="//api-maps.yandex.ru/services/constructor/1.0/js/?sid=-H_SmaNNNrTlAYRCvjvv_lCWe_cInY3l&width=600&height=450"></script></div>
<div id="Тюмень" class="skryt"><script type="text/javascript" charset="utf-8" src="//api-maps.yandex.ru/services/constructor/1.0/js/?sid=-H_SmaNNNrTlAYRCvjvv_lCWe_cInY3l&width=600&height=450"></script></div>
<div id="Челябинск" class="skryt"><script type="text/javascript" charset="utf-8" src="//api-maps.yandex.ru/services/constructor/1.0/js/?sid=r_u3DWPeKy_hduvAUEZ3jh-UsdQYB_dL&width=600&height=450"></script></div>
<div id="Екатеринбург" class="skryt"><script type="text/javascript" charset="utf-8" src="//api-maps.yandex.ru/services/constructor/1.0/js/?sid=NJQxyfhGw8bj4rAR38Iso7rax7Z-tahL&width=600&height=450"></script></div>
</div>
</body>
</html>

 

6 комментариев
Подписаться на комментарии к посту
поправьте код и скажите версию АПИ, которая у Вас установлена.

Добрый день. Код поправлен, версию к сожалению не знаю, карты создавались конструктором.

где инициализация переменной self? обращение к свойству необъявленной переменной вызовет ошибку.
Такой функционал лучше реализовывать не через конструктор. А то 30 http-запросов делаете чтобы одну карту показать.

Self — это не переменная. Это параметр, который неявно присутствует в каждом методе класса, применяемого к объектам (function и procedure в отличие от class function и class procedure). Соответственно, имя Self доступно только внутри методов класса.

Карты там разные, на разные города, в зависимости от выбранной вкладки, изначально они скрыты, т.к. первая вкладка содержит текст. Повторюсь - если вместо скрипта карт вставить текст, то все работает. Как заставить отображаться карты?

self === window. Просто ссылка на то же окно. 
Функции в JS формально выполняют роль классов и процедур при определенных условиях. Отдельных сущностей «класс» и «процедура» в языке нет. 

Чтобы вкладки заработали, перепишите свой css так:
вместо:
.korpus div {
  border: 1px solid #e1e1e1;
  padding: 5px;
  width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
  }

так:
.korpus .skryt, .korpus .vid {
  border: 1px solid #e1e1e1;
  padding: 5px;
  width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
  }

Проблема решена, как выяснилось дело было в этой строке

.korpus .skryt { display: none; }

Дело в том, что когда элемент удалялся (скрывался во вкладке) то и удалялись переданные размеры карт, поэтому при включении вкладки карта по размеру равнялась нулю. Решено следующим образом, вместо этой строке было написано:

.korpus .skryt {
    position: absolute !important;
    left: -10000px !important;
    display: block !important;
}