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'sani height'sniczego 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 divna końcu strony (w rzeczywistości tworzy on detached DOM tree- ale koncepcyjnie łatwiej jest to zrozumieć, jeśli powiem, że wyobrażasz sobie divistnienie 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 h1i ptagi zostaną do niego zastosowane), aby uzyskać jego widthi 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), h1część 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 infoWindowon na mapie, #map-canvas h1selektor będzie miał pierwszeństwo, powodując, że rozmiar czcionki będzie znacznie różny od tego, jaki był, gdy API mierzyło rozmiar, infoWindowiw 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 bodylub 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 infoWindowpierwszym 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 infoWindowotwarciu, ale jeśli otworzysz je infoWindowponownie, 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 Robotorodzinę czcionek. Problem polega na tym, że dla większości ludzi, zanim otworzyłeś infoWindow, przeglądarka nie pobrała jeszcze Robotoczcionki (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 infoWindowi API dopisuje divze swojej infoWindowzawartości do ciała, aby wziąć go za pomiary, rozpoczyna pobieranie Robotoczcionek, ale twoje infoWindow'ssą pomiary, a okno jest umieszczone na mapie, zanim Robotozakończy pobieranie. Rezultatem był dość częstoinfoWindowktórego pomiary zostały wykonane, gdy treść była renderowana przy użyciu Ariallub sans-serifczcionką, ale gdy była wyświetlana na mapie (i Robotozakoń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 infoWindowpo raz drugi - w którym momencie Robotoplik został pobrany i będzie używany, gdy API będzie mierzyć infoWindowzawartość i nie zobaczysz żadnych pasków przewijania.