Jac*_*obT 82 html javascript css google-maps
当您单击我的Google Maps v3上的主页图标时,我的InfoWindow似乎无法自动调整InfoWindow的内容.
当它不应该时,它给滚动条.InfoWindow应该正确自动调整大小.
有什么想法吗？
根据请求,为InfoWindow注入HTML的相关JavaScript:
listing = '<div>Content goes here</div>';
UPDATE
此错误由Google负责处理
https://issuetracker.google.com/issues/35823659
该修复程序于2015年2月在Maps JavaScript API 3.19版中实施.
Har*_*rry 32
在你的infowindow中添加一个div
<div id=\"mydiv\">YourContent</div>
然后使用css设置大小.适合我.这假设所有的infowindows都是相同的大小!
#mydiv{
width:500px;
height:100px;
}
for*_*ise 30
简答:在构造函数中设置maxWidth选项属性.是的,即使设置最大宽度不是您想要做的.
更长的故事:将v2地图迁移到v3,我看到了所描述的问题.Windows的宽度和高度各不相同,有些有垂直滚动条,有些没有.有些已经嵌入数据中,但至少有一个具有那么大的OK.
我没想到InfoWindowsOptions.maxWidth财产是相关的,因为我不在乎限制 ......但通过与信息窗口构造设置它的宽度,我得到了我想要的东西,而现在的Windows自动调整(垂直)和显示没有垂直滚动条的完整内容.对我来说没有多大意义,但它确实有效!
见:http://fortboise.org/maps/sailing-spots.html
小智 24
您应该从jQuery对象将内容提供给InfoWindow.
var $infoWindowContent = $("<div class='infowin-content'>Content goes here</div>");
var infoWindow = new google.maps.InfoWindow();
infowindow.setContent($infoWindowContent[0]);
Rej*_*ath 21
.gm-style-iw{
height: 100% !important;
overflow: hidden !important;
}
这个对我有用
Ada*_*dam 21
编辑(突出):相信我,在这个问题的其他一百个答案中,这是唯一正确的解释为什么它正在发生
好的,所以我知道这个帖子已经老了,并且有一千个答案,但是没有一个是正确的,我觉得需要发布正确的答案.
首先,你不会永远需要指定width's或height's任何东西,以获得您的信息窗口显示没有滚动条,虽然有时候你可能会意外地得到它做这个工作(但它最终会失败).
其次,谷歌地图API infoWindow's 没有滚动错误,很难找到有关它们如何工作的正确信息.嗯,这是:
当您告诉Google Maps API在infoWindow中打开时,如下所示:
var infoWindow = new google.maps.InfoWindow({...});
....
infoWindow.setContent('<h1>Hello!</h1><p>And welcome to my infoWindow!</p>');
infoWindow.open(map);
出于所有意图和目的,谷歌地图临时放置div在页面的末尾(实际上它创建了一个detached DOM tree- 但在概念上更容易理解,如果我说你想象一个div位于页面末尾的地方)与你的HTML内容指定.然后它测量div(这意味着,在这个例子中,我的文档中的任何CSS规则都适用于它h1并且p标签将被应用于它)以获得它width和height.然后,谷歌div会对其进行测量,将测量结果附加到页面上,并将其放置在您指定位置的地图上.
这是许多人遇到问题的地方 - 他们可能有这样的HTML:
<body>
<div id="map-canvas"><!-- google map goes here --></div>
</body>
并且,无论出于何种原因,CSS看起来像这样:
h1 { font-size: 18px; }
#map-canvas h1 { font-size: 32px; }
你能看到问题吗？当API尝试为您进行测量时infoWindow(在显示它之前),h1内容的一部分将具有大小18px(因为临时"测量div"附加到正文),但是当API实际放置infoWindow时在地图中,#map-canvas h1选择器将优先使字体大小与API测量大小时的字体大小大不相同infoWindow,在这种情况下,您将始终获得滚动条.
由于您有滚动条的具体原因,可能会有稍微不同的细微差别infoWindow,但其背后的原因是因为:
infoWindow无论实际HTML元素在标记中出现的位置如何,相同的CSS规则都必须适用于您内部的内容.如果他们不这样做,那么您将保证在infoWindow中获得滚动条
所以我一直这样做,是这样的:
infoWindow.setContent('<div class="info-window-content">...your content here...</div>');
在我的CSS中:
.info-window-content { ... }
.info-window-content h1 { .... }
.info-window-content p { ... }
etc...
所以无论API在哪里附加它的测量div- 在结束之前body或在内部之前#map-canvas,应用于它的CSS规则将始终是相同的.
编辑RE:字体系列
Google似乎正在积极处理字体加载问题(如下所述),并且最近功能已发生变化,因此您infoWindow在第一次打开时可能会看到Roboto字体加载,也可能看不到,这取决于您使用的API的版本.有一个开放的错误报告(即使在更改日志中这个错误报告已被标记为已修复),这说明谷歌仍然遇到此问题的困难.
还有一件事:看你的家庭!
在API的最新版本中,谷歌试图巧妙地将它的infoWindow内容包装在可以用CSS选择器定位的东西中.gm-style-iw.对于那些不理解我上面解释过的规则的人来说,这并没有真正帮助,在某些情况下甚至更糟.滚动条几乎总是在第一次infoWindow打开时出现,但如果infoWindow再次打开,即使内容完全相同,滚动条也会消失.说真的,如果你之前没有感到困惑会让你失去理智.这是发生的事情:
如果您在API加载时查看Google在页面上加载的样式,您将能够看到:
.gm-style {
font-family: Roboto,Arial,sans-serif
...
}
好的,所以Google希望通过始终使它们使用Robotofont-family 来使它的地图更加一致.问题是,对于大多数人来说,在您打开之前infoWindow,浏览器还没有下载Roboto字体(因为您的页面上没有其他内容使用它,因此浏览器足够聪明,知道它不需要下载这个字体).下载此字体不是即时的,即使它非常快.第一次打开infoWindow并且API将div您的infoWindow内容附加到正文以进行测量时,它会开始下载Roboto字体,但是infoWindow's在Roboto完成下载之前会进行测量并将窗口放在地图上.结果,通常是在infoWindow使用Arial或使用sans-serif字体呈现内容时进行测量,但是当它在地图上显示(并且Roboto已完成下载)时,其内容以不同大小的字体显示 -瞧 - 第一次打开时会出现滚动条infoWindow.infoWindow第二次打开完全相同的时间 - 此时Roboto已经下载并将在API进行infoWindow内容测量时使用,您将看不到任何滚动条.
小智 12
我尝试了列出的每个答案.没有人为我工作.这终于永久修复了它.我继承的代码包含DIV了所有<h#>和<p>条目的包装器.我只是在同一个DIV中强制一些"风格",考虑到所需的最大宽度,投入线高度变化以防万一(别人的修复)和我自己的white-space: nowrap,然后使自动溢出进行正确的调整.没有滚动条,没有截断,没有问题!
html = '<div class="map-overlay" style="max-width: 400px;
line-height: normal;
white-space: nowrap;
overflow: auto;
">';
我知道这是一个旧线程,但我刚遇到同样的问题.我在InfoWindow中有<h2>和<p>元素,这些都有底部边缘.我删除了边距,InfoWindow的大小正确.没有其他建议的修复工作.我怀疑InfoWindow大小计算没有考虑边距.
要将我的答案添加到列表中,因为这些都没有解决我的问题.我最终将我的内容包装在div中,给div一个类,并min-width在div上指定,maxWidth并在infoWindow上指定它们,并且它们都需要是相同的大小,否则宽度或高度将溢出在包含错误内容的盒子上.
使用Javascript:
// Set up the content for the info box
var content = "<div class='infowindow-content'>" + content + "</div>";
// create a map info box
var infoWindow = new google.maps.InfoWindow({
maxWidth: 350,
content: content
});
CSS:
div.infowindow-content {
min-width: 350px;
}
小智 7
我已经尝试了所有这些解决方案,没有一个工作.经过一些试验和错误,我想出来了.
<style type="text/css">
#map_canvas {
line-height:normal;
}
</style>
设置line-height:地图canvas div的normal.
似乎问题出在Roboto webfont上.
根据提供的内容,使用内联宽度和高度属性呈现信息窗口.但是,它不是使用已经渲染/加载的webfont计算的.在整个地图打印到屏幕后渲染字体后,由于窗口DIV内部的"溢出:自动"属性内嵌,导致滚动条出现.
我发现工作的解决方案是将内容包装在DIV中,然后应用CSS来覆盖webfont:
.gmap_infowin {
font-family: sans-serif !important;
font-weight: normal !important;
}
<div class="gmap_infowin">Your info window content here.</div>
有趣的是，以下代码将纠正 WIDTH 滚动条：
.gm-style-iw
{
overflow: hidden !important;
line-height: 1.35;
}
用这个来纠正 HEIGHT 滚动条：
.gm-style-iw div
{
overflow: hidden !important;
}
编辑： 添加空格：nowrap; 任何一种风格都可能纠正移除滚动条时似乎仍然存在的间距问题。伟大的点内森。
使用 domready 事件并在 domready 事件触发两次后重新打开信息窗口并显示隐藏内容，以确保所有 dom 元素均已加载。
// map is created using google.maps.Map()
// marker is created using google.maps.Marker()
// set the css for the content div .infowin-content { visibility: hidden; }
infowindow = new google.maps.InfoWindow();
infowindow.setContent("<div class='infowin-content'>Content goes here</div>");
infowindow.setPosition(marker.getPosition());
infowindow.set("isdomready", false);
infowindow.open(map);
// On Dom Ready
google.maps.event.addListener(infowindow, 'domready', function () {
if (infowindow.get("isdomready")) {
// show the infowindow by setting css
jQuery('.infowin-content').css('visibility', 'visible');
}
else {
// trigger a domready event again.
google.maps.event.trigger(infowindow, 'content_changed');
infowindow.set("isdomready", true);
}
}
我尝试只执行 setTimeout(/* show infowin callback */, 100)，但有时如果内容（即：图像）加载时间太长，则仍然不起作用。
希望这对你有用。
| 归档时间： |
|
| 查看次数： |
100273 次 |
| 最近记录： |