Как работает форматирование CSS в пузыре Google Maps?
Я использую 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.
Вы проверяли элемент с помощью Firebug? Он покажет вам, какие классы применяются и из какого файла / строки.
Ответы 4
Мое первое предположение заключается в том, что вы столкнулись с проблемой специфичности CSS. На http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ есть хорошая статья об этом, так что, если вы можете включить идентификатор элемента контейнера, это поможет май.
Дайте мне знать, если это не проблема, и я предложу другие идеи.
Нет, не думаю, что это правильно. Например: <div class = "MapPopup"> должен иметь желтый фон - это не вопрос специфики.
У меня никогда не было проблем со стилями, и тот факт, что применяются только некоторые стили, заставляет меня думать, что они заменяются другими стилями. Как предлагал Зак выше, проверьте элемент с помощью Firebug и посмотрите, что действительно влияет на шрифт и т. д.
Как и было предложено, я пошел с Firebug, чтобы посмотреть, что происходит. Похоже, Google делает две неприятные вещи:
- Он удаляет все атрибуты класса из моего HTML.
- Он использует всевозможные жестко запрограммированные стили.
Вот мой 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.
Другая неприятность, связанная с HTML в блоке KML <description>: всем ссылкам присваивается атрибут target = "_blank", нравится вам это или нет. В настоящее время я изучаю способы отменить это с помощью jQuery, но какое сопротивление. Я действительно не понимаю, почему Google считает необходимым вмешиваться в этот HTML.
См. Также эта ветка в официальной группе Google.
У меня были похожие проблемы. Я не знаю, как вы реализуете свой маркер или используете ли вы InfoWindow или .addListener, но мне пришлось заставить стили css работать внутри «всплывающего пузыря» (над маркером), чтобы используйте то, что называется «встроенным стилем». Итак, у меня есть переменная, которую я передаю в InfoWindow. Предполагая, что вы инициализировали переменную «маркер» с некоторыми параметрами и создали экземпляр «карты», некоторый пример кода будет выглядеть следующим образом:
/*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 в голове или из таблицы стилей Всегда есть конфликты, и некоторые функции не работают t рендеринг правильно.
Вы можете опубликовать пример в Интернете? Возможно, будет проще отладить, если есть что-то, к чему мы можем обратиться.