如何使用Javascript(v3 API)调整Google Maps InfoWindow的大小 [英] How to size a Google Maps InfoWindow in Javascript (v3 API)

问题描述

是的.这是 Google Maps API v3:InfoWindow大小不正确一个>.
但是，在该问题上提供的所有解决方案都不适合我:(

代码:

Yes. This is a duplicate of Google Maps API v3: InfoWindow not sizing correctly.
However, none of the solutions offered on that question worked for me :(

code:

 //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 Maps为地图顶部的信息窗口创建的HTML:

This is the HTML Google Maps creates for the info-window on top of the map:

<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>

嗯，有帮助吗?

Um, help?

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

NOTE: the #locationMap div has stylings for its size (not included in the code example). There are no problems in the representation of the map - just the representation of the InfoWindow which always seem to be 247px wide, no matter what I set its content to...

推荐答案

不确定是否有帮助，但是我发现实际上有2件东西可以控制Google地图中infoWindow的高度.

not sure if it helps but I found that there are actually 2 things that control the height of the infoWindow in google maps.

1. infoWindow的内容和适用于infoWindow内容的CSS(大多数人都清楚这一点)
2. (还有可能最令人困惑的地方)是Google Maps canvas本身的高度！！！

我有一个设置为250px高的画布，无论我如何设置要放置在infoWindow中的内容的样式，它都保持88px的固定高度并显示滚动条.一旦我将画布变大了一点(300px)，infoWindow的最大高度也就改变了.

I had a canvas that was set to 250px tall and regardless of how I styled the content that was to be placed in the infoWindow, it remained a fixed height of 88px and a scrollbar appear. Once I made the canvas a little larger (300px) the max-height of the infoWindow also changed.

如果您认为调整infoWindow的大小可以正确地做其他事情，那么最后的选择就是将画布扩大一点.

If you think you are doing everything else right with sizing your infoWindow, the last resort is to make your canvas a little larger.

祝你好运！

这篇关于如何使用Javascript(v3 API)调整Google Maps InfoWindow的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！