1

我在 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);
4

1 回答 1

2

您可以通过多种方式更改 infoWindow 的大小。一种是在 中设置标签的width and height，这本质上是白色 infoWindow 的样式。所以，。<form>contentString<form style="width:240px; height:240px">

另一个选项是maxWidth为您的 infoWindow 设置选项 - 没有选项height，我相信它会根据您的内容进行调整。请参阅Google Maps API 参考以获取 infoWindowOptions。您必须像这样设置它：

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

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

    infoBubble = new InfoBubble({
        content: contentString,
        minWidth: 240, //width of your infoWindow/infoBubble
        arrowSize: 3 //set your desired size            
    });
于 2012-06-28T14:56:47.760 回答