Клуб API Карт

Внешний вид балуна!!!!

tbilisskiiraion
16 февраля 2012, 11:50

Помогите кто-нибудь! Я - "чайник"!

Перечитала всё, но не всё поняла.

Как поправить внешний вид и размер балуна, открывающегося при нажатии на метку? Можно ли это сделать в самом коде и как конкретно:

 

<script type="text/javascript">

    YMaps.jQuery(window).load(function () {

        var map = new YMaps.Map(YMaps.jQuery("#YMapsID-5958")[0]

        map.setCenter(new YMaps.GeoPoint(40.196538,45.375551), 12, YMaps.MapType.MAP);

        map.addControl(new YMaps.Zoom()

        map.addControl(new YMaps.ToolBar()

        YMaps.MapType.PMAP.getName = function () { return "Народная"; };

        map.addControl(new YMaps.TypeControl([

            YMaps.MapType.MAP,

            YMaps.MapType.SATELLITE,

            YMaps.MapType.HYBRID,

            YMaps.MapType.PMAP

        ], [0, 1, 2, 3])

 

        YMaps.Styles.add("constructor#pmgnm23Placemark", {

            iconStyle : {

                href : "http://api-maps.yandex.ru/i/0.3/placemarks/pmgnm23.png",

                size : new YMaps.Point(28,29),

                offset: new YMaps.Point(-8,-27)

            }

        }

 

       map.addOverlay(createObject("Placemark", new YMaps.GeoPoint(40.116887,45.461385), "constructor#pmgnm23Placemark", "Торговыйпавильон ")

 

        function createObject (type, point, style, description) {

            var allowObjects = ["Placemark", "Polyline", "Polygon"],

                index = YMaps.jQuery.inArray( type, allowObjects),

                constructor = allowObjects[(index == -1) ? 0 : index];

                description = description || "";

           

            var object = new YMaps[constructor](point, {style: style, hasBalloon : !!description}

            object.description = description;

            

            return object;

        }

    }

</script>

 

<div id="YMapsID-5958" style="width:600px;height:700px"></div>

 

 

А если править стиль, то как использовать этот совет: (Например, этот стиль приведет к растягивнию балуна: table { width : 100% } Его лучше заменить, например, на такой: table.myTable { width : 100% }) ?

 Просто заменить в первой строке {width: 100%; margin-bottom: 1.5em;} в ниже приведённом куске кода из файла style.css? И как поправить здесь внешний вид балуна?

1 строка#content table { width: 100%; margin-bottom: 1.5em; }

#content table tr th { padding: 10px; color: #666; background: #E0E0E0 url(/.head/images/tableBgr.gif) repeat-x; font-size: 70%; text-align: center; border-left: 1px solid #c2c2c2; }
#content table tr td { padding: 5px 10px; font-size: 70%; border-left: 1px solid #f0f1f0; border-bottom: 1px solid #f0f1f0; }
#content table tr td.center { text-align: center; }
#content table tr td.right { text-align: right; }
#content table tr th.first, #content table tr td.first { border-left: none; }
#content table tr td li, #content table tr td p { font-size: 100%; }
#content table caption { font-size: 80%; font-weight: bold; padding: 1em 0 0.5em; }

 

14 комментариев
Подписаться на комментарии к посту

исходник покажи, это где-то стиль в твоем документе перекрывает стиль балуна и "разрывает" его.

А что значит "исходник", простите?

js тут ни при чем

вам надо править css

ваши стили аффектят верстку АПИ из-за того что вы используете в качестве ключей для css-правил HTML-элементы

Чтобы верстка АПИ не ломалась используйте классы

.myTableClass {

...

}

вместо

table {

...

}

Похоже я зря задаю вопросы, надо мне выучить учебнить по css, а потом спрашивать.

Спасибо! Больше вопросов нет!

Почитала! Применила класс, но вставить его в теги head не имею возможности, вставила перед кодом карты и ничего не помогло. Что делать?

 

class="ballun"

   

 

....

(конец)

     

думаю вам надо править существующие стили:

#content table { width: 100%; margin-bottom: 1.5em; }

#content table tr th { padding: 10px; color: #666; background: #E0E0E0 url(/.head/images/tableBgr.gif) repeat-x; font-size: 70%; text-align: center; border-left: 1px solid #c2c2c2; } 
#content table tr td { padding: 5px 10px; font-size: 70%; border-left: 1px solid #f0f1f0; border-bottom: 1px solid #f0f1f0; } 

А как их поправить, чтобы это не повлияло на весь сайт?

Читала, что надо добавить в этот файл стилей

                #map-cont table {
                    width:auto;
                }

И всё? А на страницу с картой тоже надо где-то что-то добавить?

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

и стили привязать к классам, т.е. в стилях:

#content table { width: 100%; margin-bottom: 1.5em; }

заменить на 

#content table.someClassName { width: 100%; margin-bottom: 1.5em; }

и соответственно в коде сайта установить нужным элементам классы, чтобы стили к ним применились

class="someClassName">

...


Я так поняла, что этот класс будет применяться для всего сайта, а на карту не будет распространяться, да?

А "в коде сайта установить нужным элементам классы", это в шаблоне сайта?


 

 

Я так поняла, что этот класс будет применяться для всего сайта, а на карту не будет распространяться, да?

он будет применятся для конкретного элемента (

) с конкретным классом,

а не для всех таблиц на сайте, включая те что используются для верски элементов АПИ Карт

 

А "в коде сайта установить нужным элементам классы", это в шаблоне сайта? 

Наверное да, я не знаю как именно ваш сайт устроен.

Используется ли в нем шаблонизатор или просто набор статичных страниц

Совсем запуталась! Зачем тогда создавать класс, если он никак не отразится на карте. И когда мне его применять этот класс?

Сайт по шаблону, всю информацию размещаю в инфоблоки (я - редактор).

А можно ли исправить ситуацию с балуном не редактируя стили, а дописать стиль балуна в код карты?

Вам не надо исправлять карту, дописывая ей стили

надо поправить стили своего сайта чтобы они не ломали карту

конкретно 2 стиля

#content table tr td 

и

#content table

Сама не верю, но получилось!

Огромное спасибо за помощь!