Google отображает проблему высоты информационного окна
-
05-07-2019 - |
Вопрос
Я искал в сети решение.
Моя проблема в том, что высота информационного окна не рассчитана должным образом. Там нет изображений, так что это не проблема с загрузкой изображений позже, а размер неизвестен при создании пузыря.
Кроме того, если я добавлю на 15 строк больше текста, то его размер станет нормальным.
Это то, что я передаю infoWindowHtml:
<div><h2><a href="">Some title</a></h2><dl><dt>Location:</dt><dd>london</dd><dt>Description</dt><dd><p>Example text </p></dd></dl><p><a href="">Read more...</a></p></div>
Решение
Чтобы решить эту проблему, вы можете установить ширину и высоту основного div. Если вы установите только ширину, это будет работать. Если вы установите ширину, высоту и переполнение: авто, вы также получите полосу прокрутки в случае слишком длинного содержимого.
Однако в Google Maps V3 эта проблема решена.
Другие советы
У меня была та же проблема, но я обнаружил, что у меня была эта проблема, потому что я установил padding для .contInfoBubble в CSS, а не в параметре option. Итак, я удаляю отступы из CSS и устанавливаю его в параметре, когда создаю пузырь в html (пока не .js, а map.html) , таким образом:
[...]
var ib = new InfoBubble({
//minHeight: 125,
minWidth: 220,
padding: 7,
borderColor: "#dedede",
borderRadius: 3,
pixelOffset: new google.maps.Size(-140, -110),
});
[...]
И я решил проблему. Может быть, вам тоже.
Добавьте min-height
в ваш элемент класса infoWindow.
Это решит проблему, если ваши информационные окна имеют одинаковый размер.
Если нет, добавьте эту строку jQuery в функцию щелчка для окна информации:
//remove overflow scrollbars
$('#myDiv').parent().css('overflow','');