即使设置正确,Google地图InfoWindow宽度也会被覆盖

Question

我正在使用谷歌地图API,我有一些关于InfoWindow的麻烦.

以下是摘要:

• 当用户点击标记时,我正在加载InfoWindow的内容
• 内容是部分视图,由于Ajax调用而加载
• 在.done回调中,我调用了一个异步方法,它将数据插入到InfoWindow内容中.我需要这样做是因为我希望InfoWindow主要内容能够立即显示,而这个"奖励"信息可以在十分之几秒后显示.

这非常有效; 但我的InfoWindow右侧有一条白色条带我无法删除(见下图)

但是,我加载的内容包含在<div>一个固定的width:

<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本身,进入红色矩形) )有一个更大的尺寸,问题是.

我找到的唯一方法是运行此jQuery脚本来修改InfoWindow内部结构:

$(".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是谷歌给出的div的类名,包含InfoWindow的所有内容,这个内容在上面的屏幕截图中悬停.我还在CSS中添加了这条规则:

.gm-style-iw {
    width: 342px !important; //also tried with 100% !important, not better
} 

它在控制台中工作,但是,当它在代码本身,.done回调或domreadyGoogle Maps事件中编写时它没有效果......
但是,在这种情况下,如果我将上面的jQuery脚本封装在一个中setTimeout(),有用 !!我评论了异步方法,所以这不是一个有罪的,但它似乎domready被执行,而100%的InfoWindow仍未显示 - 这与文档相反.

我也尝试将我info.setOptions的.done回调移到外面并把它放在它之后,没有效果.

那么,如何在没有右侧白色条带的情况下显示"正常"InfoWindow？
我不想实现InfoBubble或其他自定义InfoWindow库.这是一个个人项目,我想了解问题的原因和地点.当然,找到一个解决方案.

谢谢您的帮助 !

Answer 1

它比你想象的要复杂一点.

只是一些事情:

• 你注意到有一个关闭按钮吗？即使删除按钮,空间也会存在,因为API会根据此空间计算其他节点的大小
• 尖端必须位于中心
• 圆形边框和阴影还有其他容器
• 将计算infoWindow的大小,使其适合视口
• 必要时,内容必须可滚动
• 必须设置infowindow的位置(因此需要计算infowindow的确切高度)

基本上:所有这些都需要计算确切的大小和位置,infowindow中的大多数节点都是绝对定位的,它更像是在DTP中使用的技术,而不是在HTML文档中使用它.

此外:InfoWindows将经常修改以修复错误,今天可以解决的解决方案明天可能会被破坏.

但是,一种目前适用于我的方法:

1. 将maxWidthinfowindow设置为所需的宽度 - 51(在这种情况下为291)

2. 无法应用!important-rules via $.css,因此必须直接通过样式表来完成.为了能够访问所有元素,为infowindow的根节点设置一个新类(请注意,可能存在无法控制的infoWindows,例如POI):

   google.maps.event.addListener(infowindow,'domready',function(){ 
     $('#div-main-infoWindow')//the root of the content
      .closest('.gm-style-iw')
       .parent().addClass('custom-iw');
   });
   

3. CSS:

  .custom-iw .gm-style-iw {
      top:15px !important;
      left:0 !important;
      border-radius:2px;
  }
  .custom-iw>div:first-child>div:nth-child(2) {
      display:none;
  }
  /** the shadow **/
  .custom-iw>div:first-child>div:last-child {
      left:0 !important;
      top:0px;
      box-shadow: rgba(0, 0, 0, 0.6) 0px 1px 6px;
      z-index:-1 !important;
  }

  .custom-iw .gm-style-iw, 
  .custom-iw .gm-style-iw>div, 
  .custom-iw .gm-style-iw>div>div {
      width:100% !important;
      max-width:100% !important;
  }
  /** set here the width **/
  .custom-iw, 
  .custom-iw>div:first-child>div:last-child {
      width:342px !important;
  }


  /** set here the desired background-color **/
  #div-main-infoWindow, 
  .custom-iw>div:first-child>div:nth-child(n-1)>div>div, 
  .custom-iw>div>div:last-child, 
  .custom-iw .gm-style-iw, 
  .custom-iw .gm-style-iw>div, 
  .custom-iw .gm-style-iw>div>div {
      background-color:orange !important;
  }

  /** close-button(note that there may be a scrollbar) **/
  .custom-iw>div:last-child {
      top:1px !important;
      right:0 !important;
  }

  /** padding of the content **/
  #div-main-infoWindow {
      padding:6px;
  }

演示(正如我所说,明天可能会被打破):http://jsfiddle.net/doktormolle/k57qojq7/