ZMIENIONO (aby wyróżnić się): Zaufaj mi, z setki innych odpowiedzi na to pytanie jest to jedyna poprawna odpowiedź, która wyjaśnia również DLACZEGO to się dzieje
Ok, więc wiem, że ten wątek jest stary i ma tysiąc odpowiedzi, ale żadna z nich nie jest poprawna i czuję potrzebę opublikowania poprawnej odpowiedzi.
Po pierwsze, nie musisz nigdy określać width's
ani height's
niczego włączać, aby Twoje okno infoWindow wyświetlało się bez pasków przewijania, chociaż czasami możesz przypadkowo uruchomić go w ten sposób (ale ostatecznie zakończy się niepowodzeniem).
Po drugie, Google Maps API infoWindow's
nie ma błędu przewijania, po prostu bardzo trudno jest znaleźć prawidłowe informacje na temat ich działania. Cóż, oto jest:
Gdy powiesz interfejsowi API Map Google, aby otworzył się w infoWindow w następujący sposób:
var infoWindow = new google.maps.InfoWindow({...});
....
infoWindow.setContent('<h1>Hello!</h1><p>And welcome to my infoWindow!</p>');
infoWindow.open(map);
We wszystkich celach i celach mapy google tymczasowo umieszczają znak div
na końcu strony (w rzeczywistości tworzy on detached DOM tree
- ale koncepcyjnie łatwiej jest to zrozumieć, jeśli powiem, że wyobrażasz sobie div
istnienie na końcu strony ) z treścią HTML, którą określony. Następnie mierzy ten element div (co oznacza, że w tym przykładzie wszystkie reguły CSS w moim dokumencie mają zastosowanie h1
i p
tagi zostaną do niego zastosowane), aby uzyskać jego width
i height
. Następnie Google bierze to div
, przypisuje do niego pomiary, które uzyskał, gdy został dołączony do Twojej strony, i umieszcza go na mapie w określonej przez Ciebie lokalizacji.
Oto, gdzie problem występuje w przypadku wielu osób - mogą mieć kod HTML, który wygląda tak:
<body>
<div id="map-canvas"></div>
</body>
iz jakiegoś powodu CSS wygląda tak:
h1 { font-size: 18px; }
#map-canvas h1 { font-size: 32px; }
Czy widzisz problem? Kiedy interfejs API próbuje wykonać pomiary dla Twojego infoWindow
(bezpośrednio przed wyświetleniem), h1
część treści będzie miała rozmiar 18px
(ponieważ tymczasowy element „pomiarowy” jest dołączany do treści), ale gdy interfejs API faktycznie umieszcza element infoWindow
on na mapie, #map-canvas h1
selektor będzie miał pierwszeństwo, powodując, że rozmiar czcionki będzie znacznie różny od tego, jaki był, gdy API mierzyło rozmiar, infoWindow
iw tej sytuacji zawsze otrzymasz paski przewijania.
Może być więcej nieco innych niuansów z konkretnego powodu, dla którego masz w swoim pasku przewijania infoWindow
, ale powodem tego jest:
Te same reguły CSS muszą mieć zastosowanie do treści wewnątrz, infoWindow
niezależnie od tego, gdzie w znaczniku pojawia się rzeczywisty element HTML. Jeśli tak się nie stanie, masz gwarancję, że w swoim oknie infoWindow pojawią się paski przewijania
Więc zawsze robię coś takiego:
infoWindow.setContent('<div class="info-window-content">...your content here...</div>');
aw moim CSS:
.info-window-content { ... }
.info-window-content h1 { .... }
.info-window-content p { ... }
etc...
Bez względu na to, gdzie API dołącza swój pomiar div
- przed zamknięciem body
lub wewnątrz a #map-canvas
, zastosowane do niego reguły CSS będą zawsze takie same.
EDYCJA RE: Rodziny czcionek
Wygląda na to, że Google aktywnie pracuje nad problemem ładowania czcionek (opisanym poniżej), a funkcjonalność zmieniła się bardzo niedawno, więc możesz lub nie widzieć ładowania czcionki Roboto przy infoWindow
pierwszym uruchomieniu, w zależności od wersji interfejsu API, z którego korzystasz. Istnieje otwarty raport o błędzie (mimo że w dzienniku zmian ten raport o błędzie został już oznaczony jako naprawiony), który ilustruje, że Google nadal ma problemy z tym problemem.
WIĘCEJ RZECZY: ZOBACZ SWOJE RODZINY CZCIONEK !!!
W najnowszym wcieleniu API Google starało się być sprytnym i opakować zawartość infoWindow w coś, na co można by skierować selektor CSS - .gm-style-iw
. Dla ludzi, którzy nie rozumieli zasad, które wyjaśniłem powyżej, nie pomogło to, aw niektórych przypadkach nawet pogorszyło. Paski przewijania prawie zawsze pojawiały się przy pierwszym infoWindow
otwarciu, ale jeśli otworzysz je infoWindow
ponownie, nawet z dokładnie taką samą zawartością, paski przewijania znikną. Poważnie, gdybyś nie był zdezorientowany, zanim to spowodowałoby, że straciłeś rozum. Oto, co się działo:
Jeśli spojrzysz na style ładowane przez Google na stronie, gdy ładuje się interfejs API, zobaczysz to:
.gm-style {
font-family: Roboto,Arial,sans-serif
...
}
OK, więc Google chciał, aby mapy były nieco bardziej spójne, zawsze wykorzystując Roboto
rodzinę czcionek. Problem polega na tym, że dla większości ludzi, zanim otworzyłeś infoWindow
, przeglądarka nie pobrała jeszcze Roboto
czcionki (ponieważ nic innego na twojej stronie jej nie używało, więc przeglądarka jest na tyle inteligentna, że wie, że nie musi jej pobierać ta czcionka). Pobieranie tej czcionki nie jest natychmiastowe, mimo że jest bardzo szybkie. Gdy po raz pierwszy otworzysz infoWindow
i API dopisuje div
ze swojej infoWindow
zawartości do ciała, aby wziąć go za pomiary, rozpoczyna pobieranie Roboto
czcionek, ale twoje infoWindow's
są pomiary, a okno jest umieszczone na mapie, zanim Roboto
zakończy pobieranie. Rezultatem był dość częstoinfoWindow
którego pomiary zostały wykonane, gdy treść była renderowana przy użyciu Arial
lub sans-serif
czcionką, ale gdy była wyświetlana na mapie (i Roboto
zakończyła pobieranie), jej zawartość była wyświetlana czcionką o innym rozmiarze - i voila - paski przewijania pojawiają się po raz pierwszy otwierasz infoWindow
. Otwórz dokładnie to samo infoWindow
po raz drugi - w którym momencie Roboto
plik został pobrany i będzie używany, gdy API będzie mierzyć infoWindow
zawartość i nie zobaczysz żadnych pasków przewijania.