Question

我正在尝试使用名为InfoBubble的Google Maps API v3自定义信息窗口实施。当我在本地进行开发时，Safari使气泡很好。但是，当我将其上传到实时服务器时，它不再正确计算出气泡内容的高度并显示滚动条（我不想要）（参见http://luketilley.com/maps/）。

我做了一些调查，看起来问题来自这段代码：

InfoBubble.prototype.getElementSize_ = function(element, opt_maxWidth,
                                            opt_maxHeight) {
var sizer = document.createElement('DIV');
sizer.style['display'] = 'inline';
sizer.style['position'] = 'absolute';
sizer.style['visibility'] = 'hidden';


if (typeof element == 'string') {
  sizer.innerHTML = element;
} else {
  sizer.appendChild(element.cloneNode(true));
}

document.body.appendChild(sizer);
var size = new google.maps.Size(sizer.offsetWidth, sizer.offsetHeight);

// If the width is bigger than the max width then set the width and size again
if (opt_maxWidth && size.width > opt_maxWidth) {
  sizer.style['width'] = this.px(opt_maxWidth);
  size = new google.maps.Size(sizer.offsetWidth, sizer.offsetHeight);
}

// If the height is bigger than the max height then set the height and size
// again
if (opt_maxHeight && size.height > opt_maxHeight) {
  sizer.style['height'] = this.px(opt_maxHeight);
  size = new google.maps.Size(sizer.offsetWidth, sizer.offsetHeight);
}

document.body.removeChild(sizer);
delete sizer;
return size;
};

具体来说，这一行：

var size = new google.maps.Size(sizer.offsetWidth, sizer.offsetHeight);

在调查safari报告的值时，我确认safari在本地和在线显示页面时确实报告了不同的值。

进行更多测试，我还发现问题只有在我将图像添加到信息泡泡时才开始（检查非洲海岸外的标记）。

这是我试图在info_bubble

中添加的内容

info_content = '<div class="bubble">' +
                            '<h1>' + markerData.name + '</h1>' +
                            '<div class="icons">' +
                            icon_html +
                            '</div>' +
                            '<img src="' + markerData.image + '"/>' +
                            '<p>' + markerData.description + '</p>' +
                            '<p><a target="_blank" href="' + markerData.url + '"><img src="learn_more.png"/></a></p>' +
                        '</div>';

关于这里发生了什么的任何想法？有没有更好的方法来计算所需的尺寸？

更新：这可能是Safari的一个错误。我只是花了一些时间在调试器中，如果我设置一个断点并手动逐步执行这些功能，它会做正确的事情，但如果我让它运行，它会继续行为不端。所以我想现在的问题是：有解决方法吗？

InfoBubble无法在Safari中正确计算div高度

0 个答案: