如何调整google infoWindow的大小

Question

我在Google地图上使用infoWindow显示一些信息时遇到问题。我想让这个白色div更小，以便它可以匹配其中的灰色框大小。而且我想制作这个“白色”箭头，从标记到白色div也会变小。

这是图片：

我的代码：

var contentString = '<form >'+
  '<h2><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Data:</b></h2>'+
  '<div id="bodyContent">'+
  '<div style=width:220px;display:inline-block;>'+
  '<p>&nbsp;' +'</p>' + '<p>&nbsp;' + '</p>' + '<p>&nbsp;' + '</p>' +
  '<p>&nbsp;' + '</p>' + '</div>'+
  '<div style=width:220px;display:inline-block;>'+
  '<p>&nbsp;' +'</p>' + '<p>&nbsp;' + '</p>' + '<p>&nbsp;' + '</p>' +
  '<p>&nbsp;' + '</p>' + '</div>'+ '</div>'+ '</form>';
var infowindow = new google.maps.InfoWindow({
  content: contentString
});
/* info window */
infowindow.open(map,tracked);

Answer 1

您可以通过几种方式更改infoWindow的大小。一种方法是在width中设置height标记的<form>和contentString，这实际上就是白色infoWindow的样式。所以，<form style="width:240px; height:240px">。

另一个选项是为您的infoWindow设置maxWidth选项 - height没有选项，根据您认为的内容进行调整。请参阅Google Maps API Reference for infoWindowOptions。你必须像这样设置它：

    var infowindow = new google.maps.InfoWindow({
        content: contentString,
        maxWidth: 240
    });

但是，我认为当前的API无论如何都可以改变“白色”箭头的大小。您可以考虑使用infoBubble Library - 它是您可以在Google地图中使用的众多开源库之一（这里是其他人的链接：http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries）。相当多，你会声明infoBubble与infoWindow一样 - 但你有更多的样式选项 - 特别是你的情况你可以改变arrowSize：

    infoBubble = new InfoBubble({
        content: contentString,
        minWidth: 240, //width of your infoWindow/infoBubble
        arrowSize: 3 //set your desired size            
    });