Как работает форматирование CSS в пузыре Google Maps? - PullRequest
Новая
       27

Как работает форматирование CSS в пузыре Google Maps?

4 голосов
/ 15 октября 2008

Я использую KML и объект GGeoXml для наложения некоторых фигур на встроенную карту Google. Метки в файле KML содержат некоторую пользовательскую описательную информацию, которая отображается в всплывающих подсказках. 

<Placemark>
    <name />
    <description>
        <![CDATA[
            <div class="MapPopup">
                <h6>Concession</h6>
                <h4>~Name~</h4>
                <p>Description goes here</p>
                <a class="Button GoRight FloatRight" href="#"><span></span>View details</a>
            </div>
        ]]>
    </description>
    <styleUrl>#masterPolyStyle</styleUrl>
    ...Placemarks go here ...
</Placemark>

Пока все хорошо - всплывающие окна появляются и содержат правильный текст. Вот странная вещь: я пытаюсь использовать CSS для форматирования того, что появляется во всплывающих окнах, и это наполовину работает.

В частности:

  • Элементы <h6> и <h4> отображаются с использованием цветов и фоновых изображений, указанных в моей таблице стилей.
  • Все отображается в Arial, а не в шрифте, который я указал в моем CSS.

  • Кажется, что имена классов игнорируются (например, не применяется форматирование a.Button; если я определяю стиль, подобный приведенному ниже, он игнорируется). 

    div.MapPopup { background:pink; }

Есть идеи? Я бы не удивился тому, что CSS вообще не работает, но странно, что он работает только частично.

Обновление

Вот скриншот, чтобы лучше проиллюстрировать это. Я воспроизвел разметку <div class="MapPopup"> ниже на странице (желтым цветом), чтобы показать, как она должна отображаться в соответствии с моим CSS.

alt text

Ответы [ 4 ]

6 голосов
/ 16 октября 2008

Как и предполагалось, я пошел с Firebug, чтобы посмотреть, что происходит. Похоже, Google делает две неприятные вещи:

  1. Он удаляет все атрибуты класса из моего HTML.
  2. Это бросает все виды жестко закодированных стилей.

Вот мой HTML вместе с первой парой оберток, вставленных Google: 

<div style="font-family: Arial,sans-serif; font-size: small;">
    <div id="iw_kml">
        <div>
            <h6>Concession</h6>
            <h4>BOIS KASSA 1108000 (Mobola-Mbondo)</h4>
            <p>
                Description goes here</p>
            <a target="_blank"><span />View details </a>
        </div>
    </div>
</div>

Как видите, все мои уроки (например, MapPopup в моих первых div, Button и т. Д. В теге <a>) были удалены.

Зная это, я смогу обойти вмешательство Google, используя !important и нацелив контейнер div на всю карту - тем не менее, это раздражает и неожиданно неуклюже приходит от Google.

2 голосов
/ 18 октября 2008

Больше связанных с этим неприятностей, связанных с HTML в блоке KML <description>: любые ссылки получают атрибут target="_blank", нравится вам это или нет. В настоящее время я изучаю способы отменить это, используя jQuery, но что за сопротивление. Я действительно не понимаю, почему Google считает необходимым вмешиваться в этот HTML.

См. Также эту тему в официальной группе Google .

1 голос
/ 05 августа 2011

У меня были похожие проблемы. Я не знаю, как вы реализуете свой маркер, или используете ли вы InfoWindow или .addListener, но они заставили меня использовать CSS-стили для работы внутри «всплывающего пузыря» (над маркером), использовать то, что называется «встроенный стиль». Итак, у меня есть переменная, которую я передаю в InfoWindow. Предполагая, что вы инициализировали переменную «marker» с некоторыми параметрами и создали экземпляр «map», пример кода будет выглядеть следующим образом: 

/*start of myHtml2 variable*/
var myHtml2 = "<div style=\"background-color:lightgray\"><div style=\"padding:5px\"><div
style=\"font-size:1.25em\">Some text</div><div>Some more text<br/>
Yet more text<br/></div><table style=\"padding:5px\"><tr><td><img src=\"A lake.jpg\"
width=\"75px\" height=\"50px\"></td><td>More text<br/>Again, more text<br/><div
style=\"font-size:.7em\">Last text</div></td></tr></table></div></div>"
/*end of variable*/

var infowindow2 = new google.maps.InfoWindow({content: myHtml2});
 /*mouseover could be 'click', etc.*/
google.maps.event.addListener(marker, 'mouseover', function(){  
infowindow2.open(map, marker);
});

Я знаю, что код стилей CSS громоздок, но я не нашел способа использовать сложные стили CSS в «всплывающем пузыре», используя CSS в голове или из таблицы стилей. Всегда есть конфликты, и некоторые объекты не отображаются должным образом.

0 голосов
/ 15 октября 2008

Мое первое предположение, что вы столкнулись с проблемой специфичности CSS. На ней есть хорошая статья на http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/,, поэтому, если вы можете включить идентификатор элемента контейнера, может помочь.

Дайте мне знать, если это не станет проблемой, и я подойду с новыми идеями.

...