google-maps - 即使设置正确，Google map InfoWindow 宽度也会被覆盖

Question

我正在使用 Google Maps API，但我遇到了一些关于 InfoWindow 的问题.

这里是一个总结:

• 当用户点击标记时，我正在加载 InfoWindow 的内容
• 内容是部分 View ，通过 Ajax 调用加载
• 在 .done 回调中，我调用一个异步方法，它将数据插入到 InfoWindow 内容中。我需要这样做，因为我希望立即显示 InfoWindow 主要内容，而此“奖励”信息可能会在零点几秒后显示。

这完全有效；但我的信息窗口右侧有一条白色 strip ，无法删除(见下图)

但是，我加载的内容包含在 <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是 Google 给出的包含 InfoWindow 所有内容的 div 的类名，即悬停在上面屏幕截图上的那个。我还在 CSS 中添加了此规则:

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

它在控制台中工作，但是，在代码本身中编写时没有任何效果，在 .done 中回调，或者在 domready Google map 的事件...
但是，在这种情况下，如果我将上述 jQuery 脚本封装在 setTimeout() 中， 有用 !!我评论了异步方法，所以有罪的不是这个，但好像domready已执行，但 100% 的 InfoWindow 尚未显示 - 即 contrary to the doc .

我还尝试移动我的 info.setOptions外.done回调并放在其后面，没有效果。

那么，如何显示右侧没有白色 strip 的“正常”InfoWindow？
我不想实现InfoBubble或其他自定义 InfoWindow 库。这是一个个人项目，我想了解问题的原因和出处。当然，还要找到解决方案。

感谢您的帮助!

Answer 1

这比你想象的要复杂一点。

只是一些事情:

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

基本上:所有这些都需要计算精确的大小和位置，信息窗口中的大多数节点都是绝对定位的，这更像是一种在 DTP 中使用的技术，而不是在 HTML 文档中使用的技术。

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

但是，目前对我有用的方法:

1. 将信息窗口的 maxWidth 设置为所需的宽度 - 51(在本例中为 291)

2. 不可能通过 $.css 应用 !important 规则，因此必须直接通过样式表完成。为了能够访问所有元素，为信息窗口的根节点设置一个新类(请注意，可能存在您无法控制的信息窗口，例如 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/