Google Maps信息窗口调整大小 [英] Google Maps Info window resizing
问题描述
我有一个API V3映射，每个标记都有一个内容窗口.每个标记都有一个包含.SVG文件的信息窗口.信息窗口的内容跨越多行，但信息窗口的大小无法调整以适合所有内容，从而导致出现类似iframe的滚动条.我也无法关闭信息窗口.有没有人帮助我解决问题.这是我的代码
I have a API V3 map, with a content window for each marker. Each marker has an info window containg a .SVG file. 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. Also i can't even close the info windo. Is there anyone help me how to fix my problem. Here is my code
function initialize(){
var myCenter = new google.maps.LatLng(36.4333, -117.9509);
var sfv = new google.maps.LatLng(34.18258, -118.43968);
var sgv = new google.maps.LatLng(34.07959, -118.03335);
var pasadena = new google.maps.LatLng(34.14778, -118.14452);
var la = new google.maps.LatLng(34.05223, -118.24368);
var oc = new google.maps.LatLng(33.71747, -117.83114);
var imageBounds=new google.maps.LatLngBounds(
new google.maps.LatLng(36.3943, -118.1050),
new google.maps.LatLng(36.4735, -117.8529));
var marker, marker1;
var mapProp = {
zoom:9,
center:la,
mapTypeId: google.maps.MapTypeId.ROADMAP}
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
var marker1=new google.maps.Marker({
position:sfv,
animation:google.maps.Animation.BOUNCE
});
var marker2=new google.maps.Marker({
position:sgv,
animation:google.maps.Animation.BOUNCE
});
var marker3=new google.maps.Marker({
position:pasadena,
animation:google.maps.Animation.BOUNCE
});
var marker4=new google.maps.Marker({
position:la,
animation:google.maps.Animation.BOUNCE
});
var marker5=new google.maps.Marker({
position:oc,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);
marker1.setMap(map);
marker2.setMap(map);
marker3.setMap(map);
marker4.setMap(map);
marker5.setMap(map);
var infowindow = new google.maps.InfoWindow({
content: '<IMG BORDER="0" ALIGN="Left" SRC="test.svg">'
});
var infowindow1 = new google.maps.InfoWindow({
content: '<IMG BORDER="0" ALIGN="Left" SRC="test.svg">'
});
var infowindow2 = new google.maps.InfoWindow({
content: '<IMG BORDER="0" ALIGN="Left" SRC="test.svg">'
});
var infowindow3 = new google.maps.InfoWindow({
content: '<IMG BORDER="0" ALIGN="Left" SRC="test.svg">'
});
var infowindow4 = new google.maps.InfoWindow({
content: '<IMG BORDER="0" ALIGN="Left" SRC="test.svg">'
});
var infowindow5 = new google.maps.InfoWindow({
content: '<IMG BORDER="0" ALIGN="Left" SRC="test.svg">'
});
// event handlers for clicking
google.maps.event.addListener(marker, 'click', function(){
infowindow.open(googleMap,marker);
});
google.maps.event.addListener(marker1, 'click', function(){
infowindow1.open(googleMap,marker1);
});
google.maps.event.addListener(marker2, 'click', function(){
infowindow2.open(googleMap,marker3);
});
google.maps.event.addListener(marker3, 'click', function(){
infowindow3.open(googleMap,marker3);
});
google.maps.event.addListener(marker4, 'click', function(){
infowindow4.open(googleMap,marker4);
});
google.maps.event.addListener(marker5, 'click', function(){
infowindow5.open(googleMap,marker5);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload = "initialize()">
<div id="googleMap" style="width:1080px;height:650px;"></div>
</body>
推荐答案
You can set a max width by passing in the relevant parameter, as discussed in the docs:
var infowindow = new google.maps.InfoWindow({
content: ...,
maxWidth: 300
})
相关文档.
请注意，宽度不能低于247.关于设置高度，没有特定的参数.不过，您可以使用CSS进行控制.只需为 img 元素提供 max-height 样式即可.
Note that the width can't go below 247. As for setting the height, there isn't a specific parameter for that. You can use CSS to control it, though. Just give the img elements a max-height styling.
这篇关于Google Maps信息窗口调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
