Zh YandexMap Troubleshooting/ru

From Documentation
Jump to: navigation, search

Границы

Всплывающее окно в Яндекс.Карты собрано таблицей, соответственно, чаще всего проблемы из-за стилей шаблона выражаются в виде границы между ячейками или строками этой таблицы.

Далее рассмотрим некоторые варианты.


Всплывающее окно

Рассмотрим такой пример.

YM-Bug-border-1.JPG

Смотрим на стили.

YM-Bug-border-1-2.JPG


Метка - Иконка с текстом

Здесь рассмотрим следующий случай.

Внешне метка выглядит приблизительно так:

YM-Bug-border-2.JPG

Если посмотри на верхнюю часть метки

YM-Bug-border-2-1.JPG

А если проверить стиль, используя, например, firebug для firefox

Можно заметить наличие границы

YM-Bug-border-2-2.JPG

Аналогично анализируем нижнюю часть метки

YM-Bug-border-2-3.JPG

И ее стили

YM-Bug-border-2-4.JPG


Т.о. надо изменить стиль для границ в тегах таблицы в шаблоне


Разрывы (и границы) как на карте, так и на всплывающем окне

Имеется карта

Bug 5 - 0.JPG


Рассмотрим первую часть проблемы - разрывы между тайлами карты.


Выделим в firebug фрагмент...

Bug 5 - 1.JPG


и посмотрим стили

Bug 5 - 2.JPG


А теперь посмотрим поближе на всплывающее окно

Bug 5 - 3.JPG

Помимо разрывов еще можно заметить и границу клеток таблицы


Т.е. надо править padding, margin, border

Спасибо bravo.123 за окончательные стили, которые он дополнительно прописал в шаблоне и предоставил.

Вот пример решения, обратите внимание - это только для его шаблона.


В общем внес в template.css :

.YMaps-layer-container img
{
border-width: 0px;
margin: 0px 0px 0px 0px;
}
.YMaps-layer-container th ,.YMaps-layer-container td
{
padding: 0px;
border: solid 0px #665614;
}

Вот это подправлял, что бы хвостик на место прилепить

.YMaps-b-balloon_small .YMaps-b-balloon-tail {
bottom: -10px;
height: 12px;
right: 0;
width: 20px;
}
.YMaps-b-balloon_full .YMaps-b-balloon-tail-full {
bottom: -36px;
cursor: default;
position: absolute;
right: 16px;
}


Экран регистрации при выводе карты

Когда выводится карта неожиданно появляется окно регистрации.

Смотрите: Режим совместимости для файлов ресурсов



"Отрыв" хвоста

Обновил шаблон и получил сюрприз - съехало отображение карты. Опишу первую проблему

Bug10 - Tail - Before.JPG

Как видно, хвост балуна "оторвался" от основного тела

Кроме того, немного съехала кнопка закрытия

Bug10 - Close - Before.JPG


Открывает firebug и смотрим, что у нас стало не так. Наличие margin для таблицы.

Тут же подправим стиль и проверим нашу догадку

Bug10 - Tail- Check.JPG


Остальное - дело техники. Идем в шаблон, дописываем наши стили

.YMaps-b-balloon-frame {
  margin: 0;
}

И проверяем хвост

Bug10 - Tail - After.JPG

И кнопку закрытия

Bug10 - Close - After.JPG


Большая ширина всплывающего окна

Для того, чтобы баллон не растягивался, надо указать в шаблоне


.YMaps-b-balloon-content
    { width:300px!important; }

Например, ширина 300 пискелей и !important – обязателен, т.к. ширина там прописана в style="", что имеет приоритет над тем, что прописано в файле стилей.


Language: English  • русский