我如何获得谷歌地图InfoWindow调整大小以适应内置的内容？ [英] How do I get a google-maps InfoWindow to resize to fit the content that is placed inside of it?
问题描述
我一直在尝试使用Google Maps API，但我在InfoWindow中遇到了问题......它似乎总是太小而无法容纳我放在其中的内容，所以我的内容溢出InfoWindow到地图上：
如果InfoWindow中的内容是动态或静态的，无论大小，它似乎没有什么区别，内容周围的白框总是有点过分
这是我测试的代码：
<！DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/>
< style type =text / css>
html {height：100％}
body {height：100％;保证金：0; padding：0}
＃map-canvas {height：100％}
< / style>
< script src =http://code.jquery.com/jquery-1.10.1.min.js>< / script>
< script type =text / javascriptsrc =https://maps.googleapis.com/maps/api/js?key=AIzaSyDuV-Jyz8N6b1fVUVCa1EnbPzgeCs9J5_o&sensor=true>< / script>
< script type =text / javascript>
var zones = [
{
name：'Test Spot 1'，
latitude：29.680894，
longitude：-82.298584
}，
{
name：'Test Spot 2'，
latitude：28.323725，
longitude：-80.713806
}
]，
addDistrictMarker = function（district ，地图，infoWindow）{
var position = new google.maps.LatLng（district.latitude，district.longitude），
marker = new google.maps.Marker（{
position：position ，
map：map，
title：district.name
}）;
google.maps.event.addListener（marker，'click'，function（）{
infoWindow.close（）
var $ infoWindowContent = $（infoWindow.content），
$ title = $ infoWindowContent.find（'＃title'）;
$ title.html（marker.title）;
$ infoWindowContent.show（）;
infoWindow.open （map，marker）;
}）;
}，
addDistrictMarkers = function（map，infoWindow）{
for（var i = 0; i< districts.length; i ++）{
var district = districts [i] ;
addDistrictMarker（district，map，infoWindow）;
initialize = function（）{
var mapOptions = {
center：new google.maps.LatLng（27.907058，-81.44165），
zoom：7
}，
map = new google.maps.Map（document.getElementById（map-canvas），
mapOptions），
$ infoWindowContent = $ （'＃info-window'），
infoWindow = new google.maps.InfoWindow（{$ b $ content：$ infoWindowContent.get（0）
}）;
addDistrictMarkers（map，infoWindow）;
}
google.maps.event.addDomListener（window，'load'，initialize）;
< / script>
< / head>
< body>
< div id =map-canvas>< / div>
< div id =info-windowstyle =display：none;>
< h1 id =title>< / h1>
< div id =bodyContent>
< p>某种类型的描述...< / p>
< p>
和链接：
< a href =http://foo.bar.com> http：//foo.bar.com< / a>
< / p>
< / div>
< div style =clear：both;>< / div>
< / div>
< / body>
< / html>
有没有一种方法可以告诉Google的代码调整InfoWindow的大小自动做？或者我在我的代码中只是有一个愚蠢的错误，阻止谷歌正确调整InfoWindow的大小？解决方案
我发现明确设置用作InfoWindow内容（我的＃info-window）的div的heightcss风格似乎会导致google的代码正确设置信息窗口的大小。
<在我的例子中，我只是使用jQuery来计算和更改div内容后设置'height'风格：
$ infoWindowContent.height（$ infoWindowContent.height（））;
我还没有弄清楚是什么导致谷歌调整窗口的大小（1）静态内容有同样的问题，（2）如果/当我动态地改变窗口大小时，动态地改变内容不是原因改变了内容，他们只是没有足够的改变。不知何故，谷歌只是错算了大小。但是，明确设置css高度似乎可以解决这个问题。
I've been experimenting with the Google Maps API, but I'm having trouble with the InfoWindow... It always seems to be too small to fit the content that I place inside of it, so my content spills outside the InfoWindow and onto the map:
It doesn't seem to make a difference if the content in the InfoWindow is dynamic or static, big or small, the white box around the content is always a little bit too small.
This is the code I'm testing:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDuV-Jyz8N6b1fVUVCa1EnbPzgeCs9J5_o&sensor=true"></script>
<script type="text/javascript">
var districts = [
{
name: 'Test Spot 1',
latitude: 29.680894,
longitude: -82.298584
},
{
name: 'Test Spot 2',
latitude: 28.323725,
longitude: -80.713806
}
],
addDistrictMarker = function(district, map, infoWindow) {
var position = new google.maps.LatLng(district.latitude, district.longitude),
marker = new google.maps.Marker({
position: position,
map: map,
title: district.name
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.close()
var $infoWindowContent = $(infoWindow.content),
$title = $infoWindowContent.find('#title');
$title.html(marker.title);
$infoWindowContent.show();
infoWindow.open(map, marker);
});
},
addDistrictMarkers = function(map, infoWindow) {
for (var i=0; i<districts.length; i++) {
var district = districts[i];
addDistrictMarker(district, map, infoWindow);
}
},
initialize = function() {
var mapOptions = {
center: new google.maps.LatLng(27.907058,-81.44165),
zoom: 7
},
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions),
$infoWindowContent = $('#info-window'),
infoWindow = new google.maps.InfoWindow({
content: $infoWindowContent.get(0)
});
addDistrictMarkers(map, infoWindow);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="info-window" style="display: none;">
<h1 id="title"></h1>
<div id="bodyContent">
<p>A description of some sort...</p>
<p>
And a link:
<a href="http://foo.bar.com">http://foo.bar.com</a>
</p>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
Is there a way I can tell Google's code to resize the InfoWindow if/when Google's code doesn't do it automatically? Or do I just have a dumb mistake in my code that is preventing google from sizing the InfoWindow correctly?
I found that explicitly setting the "height" css style of the div used as the InfoWindow content ("#info-window" for me) seems to cause google's code to size the info window correctly.
In my case, I just used jQuery to calculate and set the 'height' style after changing the div contents:
$infoWindowContent.height($infoWindowContent.height());
I still haven't figured out what causes google to size the window incorrectly in the first place... Dynamically changing the content isn't the cause since (1) static content had the same problem, and (2) Google was changing the window size if/when I dynamically changed the content, they just were just weren't changing it enough. Somehow, Google was just miscalculating the size. However, explicitly setting the css height seems to get around that.
这篇关于我如何获得谷歌地图InfoWindow调整大小以适应内置的内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
