javascript - 如何在 Javascript 中调整 Google map 信息窗口的大小(v3 API)

Question

是的。这是 Google Maps API v3: InfoWindow not sizing correctly 的重复项。
但是，针对该问题提供的解决方案都不适合我:(

代码:

 //after getting a 'position' object:
 var mapPos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
 var mapOptions = { zoom:16, center:mapPos,mapTypeId:google.maps.MapTypeId.ROADMAP };
 var yourLocationMap = new google.maps.Map(document.getElementById('locationMap'), mapOptions);

 var infoContent = '<div style="width:40px;height:20px;">some information content...</div>';
 var infoBaloon = new google.maps.InfoWindow({position:mapPos, content:infoContent, maxWidth:40});
 infoBaloon.open(yourLocationMap);

这是 Google map 为 map 顶部的信息窗口创建的 HTML:

<div style="width: 247px; height: 88px;"> //<-This is actually the size of the info
window. I have no idea on what basis it decides on these dimensions.

     //next is the div for the 'X'(close) button:
    <div style="width: 10px; height: 10px; overflow: hidden; position: absolute; opacity: 0.7; left: 12px; top: 12px; z-index: 10000; cursor: pointer;">
        <img src="http://maps.gstatic.com/mapfiles/mv/imgs8.png" style="position: absolute; left: -18px; top: -44px; width: 68px; height: 67px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"></div><div style="cursor: default; position: absolute; right: 18px; top: 18px; z-index: 2; overflow: auto; width: 213px; height: 54px;">
    </div>

    // I don't know where this div is coming from... :\
    <div style="cursor: default; position: absolute; right: 18px; top: 18px; z-index: 2; overflow: auto; width: 213px; height: 54px;">
       <div style="overflow: auto;">

           **// and then, finally, the div I put in the Content of the InfoWindow:
           <div style="width:40px;height:20px;">Some content information...</div>**
       </div>
   </div>
</div>

嗯，帮忙？

注意:#locationMap div 具有大小样式(不包含在代码示例中)。 map 的表示没有问题 - 只是 InfoWindow 的表示似乎总是 247px 宽，无论我将其内容设置为什么......

Answer 1

不确定这是否有帮助，但我发现实际上有两件事可以控制谷歌地图中信息窗口的高度。

1. infoWindow 的内容以及应用于 infoWindow 内容的 CSS(大多数人都清楚这一点)
2. (这可能是最令人困惑的)谷歌地图 Canvas 本身的高度!!!

我有一个 Canvas ，高度设置为 250 像素，无论我如何设计要放置在信息窗口中的内容的样式，它仍然保持 88 像素的固定高度，并且出现滚动条。一旦我将 Canvas 放大一点(300px)，信息窗口的最大高度也发生了变化。

如果您认为调整信息窗口大小方面的其他操作都正确，那么最后的办法就是使 Canvas 更大一点。

祝你好运!