谷歌地图V3：Infowindows不调整大小以适应信息 [英] Google Maps V3: Infowindows not resizing to fit information
问题描述
我有一个API V3映射，每个标记都有一个内容窗口。 infowindow的内容横跨多行，但infowindow不调整大小以适应所有内容，导致类似iframe的滚动条出现。
我看过API中的setContent（）方法根据API V3邮件列表中的一些帖子来纠正问题。然而，它看起来像我一直在错误的地方，从而导致地图不加载。
Infowindow内容从locations_array中的字段填充。
p> 地图代码 b 下面是我使用的代码，减去setContent（） 尝试将infoWindowContent的html字符串放入div中一个有宽度设置的类然后改变： 是 Problem I have a API V3 map, with a content window for each marker. The content of the infowindow stretches across multiple lines, but the infowindow does not resize to fit it all, causing an iframe-like scroll to appear. I have looked at the setContent() method in the API which according to some posts on the API V3 mailing list should correct the issue. However, it looks like I've been putting into the wrong place thus causing the map not to load. Infowindow content is populated from a field in the locations_array. Map code Here's the code I'm using, minus the setContent() method.
Try putting the html strings of infoWindowContent in a div with a class that has a width set then change: to be
这篇关于谷歌地图V3：Infowindows不调整大小以适应信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
$ b
< script src =/ _ global / assets / scripts / jquery-1.2.6.min.js类型= 文本/ JavaScript的 >< /脚本>
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false>< / script>
< script language =javascript>
$（document）.ready（function（）{
// Google Maps
var myOptions = {
zoom：5，
center：new google.maps。 LatLng（-26.66,122.25），
mapTypeControl：true，
mapTypeId：google.maps.MapTypeId.ROADMAP，
mapTypeControlOptions：{style：google.maps.MapTypeControlStyle.DROPDOWN_MENU}，
navigationControl：true，
navigationControlOptions：{style：google.maps.NavigationControlStyle.SMALL}
}
var map = new google.maps.Map（document.getElementById（ map_canvas），myOptions）;
//创建一个数组来保存一系列通用对象
//每一个将表示一个单独的标记，并包含所有
//我们需要这个标记的信息，这样我们就可以在其他脚本中重用客户端数据
//
var locations_array = [
{纬度：-35.015672，经度：117.879639，标题：Albany，infoWindowCont ent：< strong> Albany< / strong>< br />< br />< a href = \/corporate/staff_directory/phonedir.asp?loc=fpcAlbany\>获取办公室详情< / a>}，
{纬度：-33.351479，经度：115.666658，标题：Bunbury，infoWindowContent：< strong> Bunbury< / strong>< br /> />< a href = \/corporate/staff_directory/phonedir.asp?loc=fpcBunbury\>获取办公室详情< / a>}，
{latitude：-24.850919，longitude： 113.731984，title：Carnarvon，infoWindowContent：< strong> Carnarvon< / strong>< a href = \/corporate/staff_directory/phonedir.asp?loc = fpcCarnarvon \>获取办公室详情< / a>}，
{latitude：-33.361363，longitude：116.161534，title：Collie，infoWindowContent：< strong> Collie< / strong<< ; br />< br />< a href = \/corporate/staff_directory/phonedir.asp?loc=fpcCollie\>获取办公室详情< / a>}，
{LATI tude：-33.847418，经度：121.884107，标题：Esperance，infoWindowContent：< strong> Esperance< / strong>< br />< br />< a href = staff_directory / phonedir.asp？loc = fpcEsperance \>获取办公室详细信息< / a>}，
{纬度：-31.795396，经度：115.88941，标题：Gnangara，infoWindowContent：< strong> ; Gnangara< / strong>< br />< br />< a href = \/corporate/staff_directory/phonedir.asp?loc=fpcGnangara\>获取办公室详情< / a> }，
{latitude：-33.082093，longitude：115.913902，title：Harvey，infoWindowContent：< strong> Harvey< / strong>< br />< br />< a href = \/corporate/staff_directory/phonedir.asp?loc=fpcHarvey\>获取办公室详细信息< / a>}，
{latitude：-33.082093，longitude：115.913902，title：Harvey Mill，infoWindowContent：< strong> Harvey Mill< / strong>< br />< br />< a href = \/ corporate / staff_directory /phonedir.asp?loc=fpcHarveyMill\\">获取办公室详情< / a>}，
{纬度：-30.749071，经度：121.472324，标题：Kalgoorlie，infoWindowContent：< strong> Kalgoorlie< / strong>< br />< br />< a href = \/corporate/staff_directory/phonedir.asp?loc=fpcKalgoorlie\>获取办公室详情< / a> }，
{latitude：-33.691176，longitude：117.557189，title：Katanning，infoWindowContent：< strong> Katanning< / strong>< br />< br />< a href = \/corporate/staff_directory/phonedir.asp?loc=fpcKatanning\>获取办公室详情< / a>}，
{纬度：-32.531789，经度：115.721341，标题：Mandurah ，infoWindowContent：< strong> Mandurah< / strong>< br />< br />< a href = \/corporate/staff_directory/phonedir.asp?loc=fpcMandurah\>>获取办公室详情< / a>}，
{纬度：-34.250365，经度：116.147165，标题：Manjimup，infoWindowContent：< strong > Manjimup< / strong>< br />< br />< a href = \/corporate/staff_directory/phonedir.asp?loc=fpcManjimup\>获取办公室详情< / a> ;}，
{latitude：-33.982459，longitude：115.765361，title：Nannup，infoWindowContent：< strong> Nannup< / strong>< br />< br />< a href = \/corporate/staff_directory/phonedir.asp?loc=fpcNannup\>获取办公室详情< / a>}，
{latitude：-31.953472，longitude：115.914248，title： Rivervale，infoWindowContent：< strong> Rivervale< / strong>< strong>< br />< a href = \/corporate/staff_directory/phonedir.asp?loc=fpcRivervale\ >获取办公室详细信息< / a>}，
{纬度：-31.948893，经度：115.795029，标题：Shenton Park，infoWindowContent：< strong> Shenton Park< / strong>< >< br />< a href = \/corporate/staff_directory/phonedir.asp?loc=fpcShentonPark\>获取办公室详情< / a>}，
{la titude：-34.214112，经度：116.074472，标题：West Manjimup，infoWindowContent：< strong> West Manjimup< / strong>< br />< br />< a href = \/ corporate / staff_directory / phonedir.asp？loc = fpcManjimupWest \>获取办公室详情< / a>}，
];
//现在我们为（var x = 0; x
//获取单个公园对象超出我们的数组
var _park = locations_array [x];
var myLatlng = new google.maps.LatLng（locations_array [x] .latitude，locations_array [x] .longitude）;
var marker = new google.maps.Marker（{
map：map，
position：myLatlng，
title：locations_array [x] .title，
icon： 'http://google-maps-icons.googlecode.com/files/park.png'，
clickable：true，
infocontent：locations_array [x] .infoWindowContent
}）;
google.maps.event.addListener（marker，'click'，function（）{
var infowindow = new google.maps.InfoWindow（{
content：this.infocontent
}）;
infowindow.open（map，this）;
}）;
google.maps.event.addListener（marker，'dblclick'，function（）{
map.setZoom（16）;
}）;
}
}）;
< / script>
内容：this.infocontent
内容：$（this。 infocontent）[0]
<script src="/_global/assets/scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script language="javascript">
$(document).ready(function() {
//Google Maps
var myOptions = {
zoom: 5,
center: new google.maps.LatLng(-26.66, 122.25),
mapTypeControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
navigationControl: true,
navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL }
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Create an array to hold a series of generic objects
// Each one will represent an individual marker, and contain all the
// information we need for that marker. This way, we can reuse the data
// on the client-side in other scripts as well.
var locations_array = [
{latitude: -35.015672, longitude: 117.879639, title: "Albany", infoWindowContent: "<strong>Albany</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcAlbany\">Get office details</a>"},
{latitude: -33.351479, longitude: 115.666658, title: "Bunbury", infoWindowContent: "<strong>Bunbury</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcBunbury\">Get office details</a>"},
{latitude: -24.850919, longitude: 113.731984, title: "Carnarvon", infoWindowContent: "<strong>Carnarvon</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcCarnarvon\">Get office details</a>"},
{latitude: -33.361363, longitude: 116.161534, title: "Collie", infoWindowContent: "<strong>Collie</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcCollie\">Get office details</a>"},
{latitude: -33.847418, longitude: 121.884107, title: "Esperance", infoWindowContent: "<strong>Esperance</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcEsperance\">Get office details</a>"},
{latitude: -31.795396, longitude: 115.88941, title: "Gnangara", infoWindowContent: "<strong>Gnangara</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcGnangara\">Get office details</a>"},
{latitude: -33.082093, longitude: 115.913902, title: "Harvey", infoWindowContent: "<strong>Harvey</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcHarvey\">Get office details</a>"},
{latitude: -33.082093, longitude: 115.913902, title: "Harvey Mill", infoWindowContent: "<strong>Harvey Mill</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcHarveyMill\">Get office details</a>"},
{latitude: -30.749071, longitude: 121.472324, title: "Kalgoorlie", infoWindowContent: "<strong>Kalgoorlie</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcKalgoorlie\">Get office details</a>"},
{latitude: -33.691176, longitude: 117.557189, title: "Katanning", infoWindowContent: "<strong>Katanning</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcKatanning\">Get office details</a>"},
{latitude: -32.531789, longitude: 115.721341, title: "Mandurah", infoWindowContent: "<strong>Mandurah</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcMandurah\">Get office details</a>"},
{latitude: -34.250365, longitude: 116.147165, title: "Manjimup", infoWindowContent: "<strong>Manjimup</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcManjimup\">Get office details</a>"},
{latitude: -33.982459, longitude: 115.765361, title: "Nannup", infoWindowContent: "<strong>Nannup</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcNannup\">Get office details</a>"},
{latitude: -31.953472, longitude: 115.914248, title: "Rivervale", infoWindowContent: "<strong>Rivervale</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcRivervale\">Get office details</a>"},
{latitude: -31.948893, longitude: 115.795029, title: "Shenton Park", infoWindowContent: "<strong>Shenton Park</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcShentonPark\">Get office details</a>"},
{latitude: -34.214112, longitude: 116.074472, title: "West Manjimup", infoWindowContent: "<strong>West Manjimup</strong><br /><br /><a href=\"/corporate/staff_directory/phonedir.asp?loc=fpcManjimupWest\">Get office details</a>"},
];
// Now let's create some markers
for (var x = 0; x < locations_array.length; x++) {
// Grab an individual park object out of our array
var _park = locations_array[x];
var myLatlng = new google.maps.LatLng(locations_array[x].latitude,locations_array[x].longitude);
var marker = new google.maps.Marker({
map: map,
position: myLatlng,
title: locations_array[x].title,
icon: 'http://google-maps-icons.googlecode.com/files/park.png',
clickable: true,
infocontent: locations_array[x].infoWindowContent
});
google.maps.event.addListener(marker, 'click', function() {
var infowindow = new google.maps.InfoWindow({
content: this.infocontent
});
infowindow.open(map,this);
});
google.maps.event.addListener(marker, 'dblclick', function() {
map.setZoom(16);
});
}
});
</script>
content: this.infocontent
content: $(this.infocontent)[0]
