堆栈内存溢出
  繁体   English   中英

Google Maps API v3：InfoWindow没有正确调整大小

[英]Google Maps API v3: InfoWindow not sizing correctly

 原文  2009-10-12 14:23:11  1   34    javascript/ html/ 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版中实施。

34 个解决方案

解决方案1
 32  2010-05-31 21:25:47

在你的infowindow中添加一个div 

<div id=\"mydiv\">YourContent</div>

然后使用css设置大小。 适合我。 这假设所有的infowindows都是相同的大小！ 

#mydiv{
width:500px;
height:100px;
}

解决方案2
 30  2010-12-25 20:57:58

简答： 在构造函数中设置maxWidth选项属性 。 是的，即使设置最大宽度不是您想要做的。

更长的故事：将v2地图迁移到v3，我看到了所描述的问题。 Windows的宽度和高度各不相同，有些有垂直滚动条，有些没有。 有些已经嵌入数据中，但至少有一个具有那么大的OK。

我没想到InfoWindowsOptions.maxWidth财产是相关的，因为我没在意......但通过与信息窗口构造函数将其设置为约束的宽度，我得到了我想要的东西，而现在的Windows自动调整（垂直）和显示没有垂直滚动条的完整内容。 对我来说没有多大意义，但它确实有效！

见： http ： //fortboise.org/maps/sailing-spots.html

解决方案3
 24  2011-08-03 12:56:19

您应该从jQuery对象将内容提供给InfoWindow。 

var $infoWindowContent = $("<div class='infowin-content'>Content goes here</div>");
var infoWindow = new google.maps.InfoWindow();
infowindow.setContent($infoWindowContent[0]);

解决方案4
 21  2013-11-07 09:59:54

.gm-style-iw{
    height: 100% !important;
    overflow: hidden !important;
}

这个对我有用

解决方案5
 21  2014-11-11 00:39:37

编辑（突出）：相信我，在这个问题的其他一百个答案中，这是唯一正确的解释为什么它正在发生

好的，所以我知道这个帖子已经老了，并且有一千个答案，但是没有一个是正确的 ，我觉得需要发布正确的答案。

首先，你不需要在任何东西上指定width's或height's ，以便在没有滚动条的情况下显示你的infoWindow，尽管有时候你可能会意外地让它工作（但它最终会失败）。

其次，Google Maps 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 。 然后Google接受该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中获得滚动条

所以我一直这样做，是这样的： 

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希望通过总是让它们使用Roboto字体系列来使它的地图更加一致。 问题是，对于大多数人来说，在你打开一个infoWindow之前，浏览器还没有下载Roboto字体（因为你的页面上没有其他内容使用它，所以浏览器足够聪明，知道它不需要下载此字体）。 下载此字体不是即时的，即使它非常快。 第一次打开infoWindow并且API将带有infoWindow内容的div附加到正文以进行测量时，它会开始下载Roboto字体，但是在Roboto完成下载之前，您的infoWindow's测量并将窗口放在地图上。 结果，通常是一个infoWindow ，当它的内容使用Arial或sans-serif字体呈现时进行测量，但当它显示在地图上（并且Roboto已完成下载）时，它的内容以字体显示这是一个不同的大小 - 瞧 - 滚动条出现在你第一次打开infoWindow 。 第二次打开完全相同的infoWindow - 此时已经下载了Roboto并且当API正在测量infoWindow内容时将使用它，您将看不到任何滚动条。

解决方案6
 12  2013-09-07 19:57:20

我尝试了列出的每个答案。 没有人为我工作。 这终于永久修复了它。 我继承的代码在所有<h#>和<p>条目周围都有一个DIV包装器。 我只是在同一个DIV中强制一些“风格”，考虑到所需的最大宽度，投入线高度变化以防万一（别人的修复）和我自己的white-space: nowrap ，然后使自动溢出使正确的调整。 没有滚动条，没有截断，没有问题！ 

html = '<div class="map-overlay" style="max-width: 400px;
                                        line-height: normal;
                                        white-space: nowrap;
                                        overflow: auto;
                                       ">';

解决方案7
 9  2013-03-28 18:17:42

要将我的答案添加到列表中，因为这些都没有解决我的问题。 我结束了包裹我在一个div的内容，给该分区的一类，并指定min-width的DIV，并指定maxWidth上的信息窗口，他们都需要是相同的大小，否则无论是宽度还是只有错误的内容量，盒子上的高度才会溢出。

使用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;
}

解决方案8
 9  2011-04-16 23:06:57

我知道这是一个旧线程，但我刚遇到同样的问题。 我在InfoWindow中有<h2>和<p>元素，这两个元素都有底边距。 我删除了边距，InfoWindow的大小正确。 没有其他建议的修复工作。 我怀疑InfoWindow大小计算没有考虑边距。

解决方案9
 7  2012-06-20 18:23:35

我已经尝试了所有这些解决方案，没有一个工作。 经过一些试验和错误，我想出来了。 

<style type="text/css">
#map_canvas {
    line-height:normal;
}
</style>

设置line-height：地图canvas div的normal。

解决方案10
 7  2013-07-12 13:51:35

似乎问题出在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>

解决方案11
 4  2014-10-09 19:17:28

有趣的是，以下代码将更正WIDTH滚动条： 

.gm-style-iw
{
    overflow: hidden !important;
    line-height: 1.35;

}

这需要更正高度滚动条： 

    .gm-style-iw div
    {
        overflow: hidden !important;
    }

编辑：添加空格：nowrap; 任何一种样式都可以纠正在删除滚动条时似乎停留的间距问题。 伟大的内森。

解决方案12
 3  2014-09-29 13:26:56

这完全解决了我的问题： 

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

解决方案13
 3  2011-01-20 02:41:05

这适合我。 在setContent放一个div 

sh_map.infoWindow.setContent([
  '<div id=\"mydiv\">',
  'Your content goes here',
].join(''));

然后将此CSS添加到您的页面： 

<style type="text/css">
#map-canvas {
 text-align: center;
 vertical-align: middle;
}
#mydiv {
 font-family: "Comic Sans MS", cursive;
 font-size: 10px;
 border-top-width: 0px;
 border-right-width: 0px;
 border-bottom-width: 0px;
 border-left-width: 0px;
 border-top-style: none;
 border-right-style: none;
 border-bottom-style: none;
 border-left-style: none;
 letter-spacing: normal;
 text-align: center;
 vertical-align: middle;
 word-spacing: normal;
}
</style>

例如，请访问http://www.student-homes-northampton.co.uk ; 点击房子图片下方的链接即可显示Google地图。

解决方案14
 2  2012-02-20 21:18:07

我遇到了与IE相同的问题并尝试了这些响应中详细介绍的许多修复程序，但无法可靠地删除IE中的垂直滚动条。

对我来说最有效的是在infowindow内切换到固定的字体大小 - 'px'......我正在使用ems。 通过修复字体大小，我不再需要明确声明infowindow宽度或高度，滚动条已经消失了。

解决方案15
 1  2012-09-26 20:45:21

如果没有别的，请尝试在打开窗口后添加内容。 这应该强制它调整大小。 

infoWindow = new google.maps.InfoWindow()
infoWindow.open(map, marker)
infoWindow.setContent(content)

解决方案16
 1  2011-06-14 13:42:14

同样重要的是地图容器的高度。 如果小信息窗口总是在80px高度。 否则maxWidth和#innerDiv修复就像一个魅力。

解决方案17
 0  2012-04-26 20:29:21

我认为这种行为是因为在外部容器中的一些CSS样式，我有同样的问题，但我解决了它使用内部div添加一些填充它，我知道它很奇怪，但它解决了问题 

<div id="fix_height">
    <h2>Title</h2>
    <p>Something</p>
</div>

在我的style.css 

div#fix_height{
    padding: 5px;
}

解决方案18
 0  2012-08-16 15:57:16

我在div直接使用了内联元素（一个标记），其中style="overflow:auto"[...将其包装在p标记中并修复它。

看起来任何没有嵌套在infowindow内部的块元素中的内联元素都会导致这种情况。

解决方案19
 0  2009-11-23 22:09:28

使用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），但有时候如果内容（即：图像）花费的时间太长而无法加载。

希望这对你有用。

解决方案20
 0  2013-10-11 18:46:57

将以下内容添加到我的CSS中对我来说很有用： 

white-space: nowrap;

解决方案21
 0  2014-04-01 12:37:19

只是总结一下在所有浏览器中对我有用的所有解决方案：

  • 不要在infowindow中使用边距，只使用填充。

  • 设置infowindow的最大宽度：

    this.infowindow = new google.maps.InfoWindow({ maxWidth: 200 });

  • 包裹infowindow的内容

    <div style="overflow:hidden;line-height:1.35;min-width:200px;">*CONTENT*</div>

    （更改在infowindow maxWidth上设置的值的最小宽度）

我测试了它，它适用于每个浏览器，我有超过400个标记...

解决方案22
 0  2014-06-11 15:11:57

我知道很多其他人已经找到适用于他们特定情况的解决方案，但由于它们都不适用于我的特定情况，我认为这可能对其他人有帮助。

一些细节：

我在一个项目中使用google maps API v3，其中内联CSS是我们真正想要避免的。 我的infowindows正在为除IE11之外的所有东西工作，其中宽度未正确计算。 这导致了div溢出，触发了滚动条。

我必须做三件事：

  1. 从infowindow内容中的任何内容中删除所有显示：内联块样式规则（我用display：block替换） - 我有一个想法是从一个线程（我找不到了）中尝试这个，其中有人有相同的IE6的问题。

  2. 将内容作为DOM节点而不是字符串传递。 我正在使用jQuery，所以我可以通过替换： infowindow.setContent(infoWindowDiv.html()); with infowindow.setContent($(infoWindowDiv.html())[0]); 这对我来说最简单，但还有很多其他方法可以获得相同的结果。

  3. 使用“setMaxWidth”hack - 在构造函数中设置MaxWidth选项 - 稍后设置该选项不起作用。 如果你真的不想要最大宽度，只需将它设置为一个非常大的数字。

我不知道为什么这些有效，我不确定它们中的一部分是否有效。 我知道它们都不能单独用于我的所有用例，并且2 + 3不起作用。 我没时间测试1 + 2或1 + 3。

解决方案23
 0  2014-07-11 21:54:50

我不能接受硬编码信息窗口的宽度和高度，或设置white-space: nowrap ， maxWidth解决方案没有帮助我，其他一切都不起作用或者不适合我用例。

我的解决方案是设置内容，打开窗口，然后在触发domready事件时，将内容的height CSS属性设置为height ，然后强制Google Maps相应地调整InfoWindow的大小。

infoWindow是InfoWindow对象， $infoWindowContents是我要放在那里的内容的Jquery对象， map是我的Map对象。 marker是点击的标记。 

infoWindow.setContent($infoWindowContents.get(0));

var listener = google.maps.event.addListener(infoWindow, 'domready', function() {
  // Stop listening, otherwise the listeners stack up if the window is opened again
  google.maps.event.removeListener(listener);

  // Set the height on the container to however tall the browser is currently rendering it
  $infoWindowContents.height($infoWindowContents.height());

  // Force Google Maps to recalculate the InfoWindow height
  infoWindow.setContent($infoWindowContents.get(0));
});

infoWindow.open(map, marker);

（我在类似的问题上发布了相同的解决方案如何让google-maps InfoWindow调整大小以适应放在其中的内容？ ）

解决方案24
 0  2014-08-16 06:01:12

在失去时间和阅读一段时间后，我只是想要一些简单的东西，这个css符合我的要求。 

.gm-style-iw > div { overflow: hidden !important; }

也不是即时解决方案，但主题/评论问题可能会让他们修复它，因为他们认为它已修复： http ： //code.google.com/p/gmaps-api-issues/issues/detail？id = 5713

解决方案25
 0  2014-10-03 04:32:47

那么这就是为我做的伎俩： 

.gm-style-iw>div {
    overflow: visible !important;
}

只设置overflow: visible .gm-style-iw上的overflow: visible实际上使问题变得更糟！ 我在Chrome开发者工具检查器中注意到.gm-style-iw元素中有两个div，两个都有overflow: auto默认情况下overflow: auto设置。

我在InfoWindows中显示了很多HTML格式的文本，这可能就是为什么其他解决方案对我来说根本不起作用的原因。

解决方案26
 0  2011-10-07 02:07:45

我遇到了同样的问题，当我的<h2>元素包裹到第二行时尤其明显。

我将一个类应用于infoWindow中的<div> ，并将字体更改为通用系统字体（在我的情况下，Helvetica）与已使用的@ font-face Web字体。 问题解决了。

解决方案27
 0  2011-12-24 22:53:00

//infowindow.setContent(response);    
var infowindowopts = { 
    maxWidth: 274, 
    content: response
};
infowindow.setOptions(infowindowopts);

解决方案28
 0  2012-02-03 13:52:40

我的答案是添加一个监听器（使用addListenerOnce）来检查infoWindow是否已添加到DOM，然后再次打开infoWindow（无需关闭它）。 

// map, marker and infoWindow code, we'll call them 
// myMap, myMarker and myInfoWindow

myInfoWindow.open(myMap, myMarker);
google.maps.event.addListenerOnce(myInfoWindow, 'domready', function(){
                myInfoWindow.open(myMap, myMarker);
            });

解决方案29
 0  2012-02-10 19:21:06

在infoWindow类元素中添加min-height 。

如果您的infoWindows大小相同，这将解决问题。

如果没有，请将此行jQuery添加到infoWindow的click函数中： 

//remove overflow scrollbars
$('#myDiv').parent().css('overflow','');

解决方案30
 0  2012-03-14 14:02:57

我不能让它以任何形式或形式工作，我在盒子里包括3个div。 我将它们包裹在外部div中，宽度和高度都设置正确，没有任何效果。

最后我通过将div设置为绝对左上角来固定它，然后在div之前，我设置了两个图像，一个300px宽，1px高，一个120px高，1px宽，一个透明的gif。

它适当缩放然后！

它很难看，但它很有效。

你也可以做一个图像并设置我期望的zindex，如果你的窗口没有交互，甚至只有一个图像，但这包含一个表单，所以，这不是一个选项......

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Google Maps V3 API链接到infowindow 谷歌地图api v3：infowindow位置 InfoWindow在api谷歌地图javascript v3 Infowindow上的Google Maps API v3错误 Google Maps API V3信息窗口 Google Maps API v3 InfoWindow首先显示在错误的位置，然后正确加载 在外部div google maps api v3中关闭信息窗口 自定义infowindow框与谷歌地图api v3？ 单击以专注于Google Maps API v3的InfoWindow javascript google maps api v3 markers and infowindow
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM