ĐÃ CHỈNH SỬA (nổi bật): Tin tôi đi, trong số hàng trăm câu trả lời khác cho câu hỏi này, đây là câu trả lời đúng duy nhất cũng giải thích TẠI SAO nó lại xảy ra
Ok, vì vậy tôi biết chủ đề này đã cũ và có hàng nghìn câu trả lời, nhưng không có câu trả lời nào là chính xác và tôi cảm thấy cần phải đăng câu trả lời chính xác.
Thứ nhất, bạn không cần phải chỉ địnhwidth's hoặc height'strên bất kỳ điều gì để làm cho infoWindow của bạn hiển thị mà không có thanh cuộn, mặc dù đôi khi bạn có thể vô tình làm cho nó hoạt động bằng cách làm này (nhưng cuối cùng nó sẽ thất bại).
Thứ hai, API Google Maps infoWindow's không có lỗi cuộn, chỉ là rất khó để tìm thông tin chính xác về cách chúng hoạt động. Chà, nó đây:
Khi bạn yêu cầu API Google Maps mở trong thông tinWindow như thế này:
var infoWindow = new google.maps.InfoWindow({...});
....
infoWindow.setContent('<h1>Hello!</h1><p>And welcome to my infoWindow!</p>');
infoWindow.open(map);
Đối với tất cả các ý định và mục đích, bản đồ google tạm thời đặt một divở cuối trang của bạn ( thực sự nó tạo ra một detached DOM tree- nhưng về mặt khái niệm sẽ dễ hiểu hơn nếu tôi nói rằng bạn tưởng tượng một divvị trí ở cuối trang của bạn ) với nội dung HTML mà bạn được chỉ định. Sau đó, nó đo lường div đó (có nghĩa là, trong ví dụ này, bất kỳ quy tắc CSS nào trong tài liệu của tôi áp dụng h1và pcác thẻ sẽ được áp dụng cho nó) để lấy nó widthvà height. Sau đó, Google sẽ thực hiện điều đó div, chỉ định các phép đo mà nó có được khi nó được thêm vào trang của bạn và đặt nó trên bản đồ tại vị trí bạn đã chỉ định.
Đây là nơi mà vấn đề xảy ra đối với nhiều người - họ có thể có HTML trông như thế này:
<body>
<div id="map-canvas"></div>
</body>
và vì bất kỳ lý do gì, CSS trông như thế này:
h1 { font-size: 18px; }
#map-canvas h1 { font-size: 32px; }
Bạn có thể nhìn thấy vấn đề? Khi cố gắng API để lấy số đo này cho bạn infoWindow(ngay lập tức trước khi hiển thị nó), h1một phần của nội dung sẽ có một kích thước của 18px(vì tạm thời "div đo" được gắn vào cơ thể), nhưng khi API thực sự đặt infoWindowtrên bản đồ, #map-canvas h1bộ chọn sẽ được ưu tiên hơn khiến kích thước phông chữ khác nhiều so với kích thước ban đầu khi API đo kích thước của infoWindowvà trong trường hợp này, bạn sẽ luôn nhận được thanh cuộn.
Có thể có nhiều sắc thái hơi khác nhau cho lý do cụ thể tại sao bạn có thanh cuộn trong của bạn infoWindow, nhưng lý do đằng sau nó là vì điều này:
Các quy tắc CSS tương tự phải áp dụng cho nội dung bên trong của bạn infoWindow
bất kể phần tử HTML thực sự xuất hiện ở đâu trong đánh dấu. Nếu không, thì bạn sẽ được đảm bảo nhận được thanh cuộn trong thông tin của mình
Vì vậy, những gì tôi luôn làm, là một cái gì đó như sau:
infoWindow.setContent('<div class="info-window-content">...your content here...</div>');
và trong CSS của tôi:
.info-window-content { ... }
.info-window-content h1 { .... }
.info-window-content p { ... }
etc...
Vì vậy, bất kể API thêm vào phép đo của nó ở đâu div- trước khi đóng bodyhoặc bên trong a #map-canvas, các quy tắc CSS áp dụng cho nó sẽ luôn giống nhau.
CHỈNH SỬA RE: Họ Phông chữ
Google dường như đang tích cực giải quyết vấn đề tải phông chữ (được mô tả bên dưới) và chức năng đã thay đổi rất gần đây, vì vậy bạn có thể thấy hoặc không thấy tải phông chữ Roboto khi bạn infoWindowmở lần đầu tiên, tùy thuộc vào phiên bản API bạn đang sử dụng. Có một báo cáo lỗi mở (mặc dù trong bảng thay đổi , báo cáo lỗi này đã được đánh dấu là đã sửa) minh họa rằng google vẫn đang gặp khó khăn với vấn đề này.
MỘT ĐIỀU THÊM: XEM FONT CỦA BẠN !!!
Trong phiên bản mới nhất của API, google đã cố gắng khéo léo và bọc nội dung infoWindow của nó trong một thứ gì đó có thể được nhắm mục tiêu bằng bộ chọn CSS - .gm-style-iw. Đối với những người không hiểu các quy tắc mà tôi đã giải thích ở trên, điều này không thực sự hữu ích, và trong một số trường hợp, nó thậm chí còn tồi tệ hơn. Các thanh cuộn hầu như luôn xuất hiện lần đầu tiên infoWindowđược mở, nhưng nếu bạn mở infoWindowlại bất kỳ lần nào , ngay cả với cùng một nội dung, các thanh cuộn sẽ biến mất. Nghiêm túc mà nói, nếu bạn không bối rối trước điều này sẽ khiến bạn mất trí. Đây là những gì đã xảy ra:
Nếu bạn nhìn vào các kiểu mà google tải trên trang khi API tải, bạn sẽ có thể thấy điều này:
.gm-style {
font-family: Roboto,Arial,sans-serif
...
}
Được, vì vậy Google muốn làm cho bản đồ của nó nhất quán hơn một chút bằng cách luôn đặt chúng sử dụng Robotofont-family. Vấn đề là, đối với hầu hết mọi người, trước khi bạn mở một infoWindow, trình duyệt vẫn chưa tải xuống Robotophông chữ (vì không có gì khác trên trang của bạn sử dụng phông chữ đó nên trình duyệt đủ thông minh để biết rằng nó không cần tải xuống phông chữ này). Việc tải xuống phông chữ này không phải là ngay lập tức, mặc dù nó rất nhanh. Lần đầu tiên bạn mở một infoWindowvà API gắn nội dung divcủa bạn vào phần infoWindownội dung để thực hiện các phép đo, nó sẽ bắt đầu tải xuống Robotophông chữ, nhưng các infoWindow'sphép đo của bạn đã được thực hiện và cửa sổ được đặt trên bản đồ trước khi Robototải xuống xong. Kết quả, khá thường xuyên, làinfoWindowmà các phép đo được thực hiện khi nội dung được hiển thị bằng cách sử dụng Arialhoặc mộtsans-serifnhưng khi nó được hiển thị trên bản đồ (và Robotođã tải xong) nội dung của nó đang được hiển thị ở một phông chữ có kích thước khác - và thì đấy - các thanh cuộn sẽ xuất hiện lần đầu tiên bạn mở infoWindow. Mở chính xác infoWindowlần thứ hai - tại thời điểm này, tài khoản Robotođã được tải xuống và sẽ được sử dụng khi API thực hiện phép đo infoWindownội dung và bạn sẽ không thấy bất kỳ thanh cuộn nào.