【发布时间】：2015-04-19 19:02:29
【问题描述】：
我正在使用 Google Maps API，但我对InfoWindow 有一些问题。
这是一个总结：
- 当用户单击标记时，我正在加载 InfoWindow 的内容
- 内容是部分视图，通过 Ajax 调用加载
- 在 .done 回调中，我调用了一个异步方法，它将数据插入到 InfoWindow 内容中。我需要这样做是因为我希望立即显示 InfoWindow 的主要内容，而这个“奖励”信息可能会在十分之一秒后显示。
这非常有效；但我的信息窗口右侧有一条白色条带，无法删除（见下图）
但是，我加载的内容包含在带有固定width 的<div> 中：
<div id="div-main-infoWindow">
<!-- All my content -->
</div>
在我的 CSS 中，我写道：
#div-main-infoWindow {
width:342px !important;
}
更多细节的 InfoWindow 的加载如下所示：
$.ajax({
url : "/my-url",
async : false,
contentType : "application/json; charset=utf-8",
dataType : "json",
type : "POST",
data : JSON.stringify(myModel)
}).done(function(response) {
MarkerContent = response.Content; //The HTML content to display
MyAsyncMethod().then(function(response) {
//do some formatting with response
return result; //result is just a small HTML string
}).done(function(result1, result2) {
//do some formatting with result1 and result2
$("#myNode").html(/*formatted result*/);
})
//info is a global variable defined as new google.maps.InfoWindow()
info.setOptions({
content: MarkerContent,
maxWidth: 342 //To be sure
});
info.open(map, marker);
});
});
内容完全没问题，就是这个白条的问题。
查看我的浏览器控制台（我在所有浏览器中都复制了它），我可以看到：
如您所见，我的 <div> 包含从我的 ajax 调用加载的所有数据，大小合适（绿色矩形，对应于屏幕截图中的灰色区域），但上述 div（来自 Google API本身，进入红色矩形）具有更大的尺寸，问题出在于此。
我发现的唯一方法是运行这个修改 InfoWindow 内部结构的 jQuery 脚本：
$(".gm-style-iw").next().remove();
$(".gm-style-iw").prev().children().last().width(342);
$(".gm-style-iw").prev().children(":nth-child(2)").width(342);
$(".gm-style-iw").width(342);
$(".gm-style-iw").children().first().css("overflow", "hidden");
$(".gm-style-iw").children().first().children().first().css("overflow", "hidden");
$(".gm-style-iw").parent().width(342);
注意：gm-style-iw是Google给出的包含InfoWindow所有内容的div的类名，悬停在上面的截图上。我还在我的 CSS 中添加了这条规则：
.gm-style-iw {
width: 342px !important; //also tried with 100% !important, not better
}
它在控制台中有效，但是，在代码本身、.done 回调或domready Google 地图事件中编写时无效...
但是，在这种后期情况下，如果我将上面的 jQuery 脚本封装在 setTimeout() 中，它就可以工作！我评论了异步方法，所以不是这个有罪，但似乎 domready 被执行，而 InfoWindow 的 100% 仍未显示 - 这是 contrary to the doc。
我还尝试将我的info.setOptions 移到.done 回调之外并将其放在它之后，没有效果。
那么，如果没有右侧的白色条带，如何显示“正常”信息窗口？
我不想实现 InfoBubble 或其他自定义 InfoWindow 库。这是一个个人项目，我想了解问题的原因和位置。当然，还要找到解决方案。
感谢您的帮助！
【问题讨论】：
-
它只适用于我一次，第二次点击相同或另一个标记，它使用默认值，第二次点击后'custom-iw'被删除
标签： google-maps google-maps-api-3 width infowindow