[英]How to size a Google Maps InfoWindow in Javascript (v3 API)
是。 这是Google Maps API v3的重复:InfoWindow大小不正确 。
但是 ,在该问题上提供的所有解决方案都不适合我:(
码:
//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:
<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具有其大小的样式(代码示例中未包括)。 地图的表示形式没有问题-只是InfoWindow的表示形式似乎总是247px宽,无论我将其内容设置为什么...
不知道是否有帮助,但我发现实际上有2件东西可以控制Google地图中infoWindow的高度。
我有一个设置为250px高的画布,无论我如何设置要放置在infoWindow中的内容的样式,它的固定高度都为88px,并显示滚动条。 一旦将画布稍大一点(300像素),infoWindow的最大高度也会改变。
如果您认为调整infoWindow大小可以正确地做其他事情,那么最后的选择就是将画布变大一点。
祝你好运!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.