Как удалить полосы прокрутки из пузыря карты Google в карте Google Javascript V3 - PullRequest
Новая
       29

Как удалить полосы прокрутки из пузыря карты Google в карте Google Javascript V3

11 голосов
/ 16 мая 2011

Я использовал Google map javascript V3 API для отображения карты. Но у меня проблема с пузырьками на карте. Когда информация в пузырьке превышает определенную высоту, она вставляет полосы прокрутки в пузырь.

Как я могу удалить эти полосы прокрутки и назначить динамическую ширину и высоту для пузырька в соответствии с их содержимым?

Или как я могу создать свой собственный пузырь, чтобы он был динамичным по ширине и высоте в соответствии с содержимым?

Заранее спасибо.

Ответы [ 7 ]

14 голосов
/ 16 июня 2014

Была похожая проблема - полосы прокрутки появляются во всплывающих окнах с текстовым содержимым, иногда они исчезают после закрытия и открытия всплывающего окна, они также появляются, если я изменял уровень масштабирования страницы.

Это сообщение было полезным. Я добавил несколько строк CSS, и это решило все мои дополнительные случаи с полосами прокрутки: 

.gm-style-iw {
   overflow: hidden !important; 
   line-height: 1.35;
   white-space: nowrap;
}
4 голосов
/ 12 ноября 2012

Если у вас есть изображение в ваших информационных окнах, как у меня, попробуйте немного встроенный стиль, где вы устанавливаете контент для информационных окон. Я обнаружил, что добавление display:block к тегу img устранило проблему для меня.

Проверено на FF, IE9, Opera, Safari, Chrome.

Пример: 

    var html = "<img style=\"display:block;\" src=\""+image+"\"/>"
1 голос
/ 03 октября 2013

Я обнаружил, что Firefox пересчитывает высоту элемента. например:

  1. первый элемент времени добавляется в dom, который вычисляет что-то вроде высоты по умолчанию, пусть это будет 100px.
  2. затем gmaps извлекает эту высоту и помещает ее в оболочку информационного окна, height = 100px.
  3. затем Firefox извлекает стили для этого элемента (например, размер шрифта) и устанавливает свойство высоты на основе этих вычисленных стилей, например, высота = 130px, но высота оболочки информационного окна = 100px уже была установлена ​​скриптом gmap.

Решение, которое я нашел, немного уродливо, но оно работает, мы должны сделать скрипт gmaps, чтобы пересчитать высоту оболочки для infowindow после того, как firefox пересчитал высоту элементов. 

infowindow.setContent(data);
infowindow.open(map, marker);
infowindow.close();
setTimeout(function (){
    infowindow.open(map, marker);
}, 1);
1 голос
/ 15 июля 2013

Благодаря инспектору элементов chromes я вижу, что предоставляемое вами информационное окно всегда переносится.. .Установка maxWidth не останавливает горизонтальную полосу прокрутки, если у вас есть высота прокрутки.Я решил, что мне нужно взломать родительский элемент и отключить горизонтальную прокрутку, то есть overflow-x: hidden.

Поместить идентификатор идентификатора в предоставленный вами html и найти этот элемент (используя здесь jQuery) послеЗагружается infoWindow (необходимо использовать addListener).Перейдите от элемента к родительскому элементу и установите для его свойства overflow-x значение hidden, а затем горизонтальную полосу прокрутки удалите.

Это, конечно, хак - и может перестать работать, если Google googles поменяет HTML-код infoWindow - надеюсьтогда будет и лучшее решение.

//assume you have a marker already called marker

google.maps.event.addListener(marker, 'click', function(){  

    var _info = new google.maps.InfoWindow({content: '<div id="infoWindow">content that is vertically large...</div>' });

    google.maps.event.addListener(_info, 'domready', function(){
        $(document).find('#infoWindow').parent().css('overflow-x', 'hidden' );

    });

    _info.open( map, marker ); 
} );
1 голос
/ 16 мая 2011

http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows

посмотрите на максимальную ширину

0 голосов
/ 19 августа 2014

Думаю, я нашел решение этой проблемы. В моем случае проблема была в том, как я устанавливал размер шрифта. Я думаю, что API полагается на размер шрифта в пикселях, чтобы установить начальную ширину / высоту (потому что JavaScript запускается слишком поздно, чтобы вычислять вокруг относительной ширины?

В любом случае, вам нужно указать размеры шрифта в вашем информационном окне в пикселях (а не в относительных единицах). Например: 

.infowindow p {
  font-size: 15px;
}

Как только я установил единицы измерения в пиксели, мне также пришлось указать (чтобы избавиться от настройки ширины по умолчанию): 

.gm-style-iw {
  width: auto !important;   
}

Google не обращает особого внимания на необходимость форматирования в документах API, поэтому это было довольно "методом проб и ошибок", чтобы заставить это работать. Я до сих пор не чувствую, что это решение на 100% надежно.

0 голосов
/ 04 декабря 2013

У меня была та же проблема, но мне удалось ее решить, просто отрегулировав размер шрифта и высоту строки в моей обертке.

...