Question

我们使用谷歌地图创建了一个小部件，我们可以在信息窗口中显示自定义标记和自定义文本，然后此小部件可以与不同的模板一起使用。现在的问题是，不同的模板可以为窗口小部件设置不同的块大小，有时它们是全宽度，有时它们只有大约100个像素。我只是想知道我们是否可以知道InfoWindow的大小，然后在那个基础上如果infoWindo size si bigget然后是小部件大小，那么我们将用户重定向到更大的地图的详细页面。

任何人都可以建议我如何获取infoWindow大小：

以下是我们如何生成地图和infoWindo的摘要：

var mapConf = {
    center: somePoint,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel: false,
    zoom:  12
},
markerData = {
    animation: google.maps.Animation.DROP,
    position: somePoint,
    title: 'Some random title'
},
iconConf = getMarkerIcon($markerTypeIcon || 'hollowPin', {
    fill: getColor($color_one)
}) ;

if( iconConf ) {
    iconConf.fillColor = iconConf.fill;
    iconConf.strokeColor = iconConf.stroke;
    markerData.icon = iconConf;
}

// create the map
map = new google.maps.Map(document.getElementById('map-widget'), mapConf);

// create infowindow
infoWindow = new google.maps.InfoWindow();

// create marker
marker = new google.maps.Marker(markerData);

marker.setMap(map);

var strContent = '<div id="content" style="width:170px; height: 100%;">' +
                        '<div id="add1">' +
                            '<b>'+ _config.dataName.getValue +'</b><br>' + _config.addressInfo +'</div>' +
                        '<div id="dataLink">' +
                            '<a onclick="javascript: window.parent.location.href='+ _config.strLink +'\'">GO</a>' +
                        '</div>' +
                    '</div>';

// set up property info window
markerInfoWindow = new google.maps.InfoWindow({
      content: strContent,
      position: somePoint,
      maxWidth:600
});

// add click event for marker to show info window
google.maps.event.addListener(marker, 'click', function() {
    markerInfoWindow.open(map, this);
});

Answer 1

您是否尝试获取 div元素的大小

// set up property info window

    markerInfoWindow = new google.maps.InfoWindow({
          content: strContent,
          position: somePoint,
          maxWidth:600
    });

// add click event for marker to show info window

    google.maps.event.addListener(marker, 'click', function() {
        maxWidth = document.getElementById('map-widget').offsetWidth; 
       // Or maxWidth = $('#map-widget').width();
        markerInfoWindow = new google.maps.InfoWindow({
              content: strContent,
              position: somePoint,
              maxWidth: maxWidth
        });
        markerInfoWindow.open(map, this);
    });

Answer 2

根据document，maxWidth指定信息窗口的最大宽度（以像素为单位）。默认情况下，信息窗口会扩展以适合其内容，并在信息窗口填充地图时自动换行文本。如果添加maxWidth，则信息窗口将自动换行以强制执行指定的宽度。如果它达到最大宽度并且屏幕上有垂直空间，则信息窗口可以垂直扩展。

然后，如果您希望明确调整内容的大小，可以将其放在<div>元素中，并使用CSS设置<div>样式。您也可以使用CSS来启用滚动功能。请注意，如果您未启用滚动且内容超出信息窗口中的可用空间，则内容可能会溢出信息窗口。

尝试在infowindow中添加div。

<div class="myinfowindow"> </div>

然后使用css设置大小。

.myinfowindow{
width:500px;
height:100px;
}

另请查看此SO question以获取更多信息。

在Google地图中检查InfoWindow大小

2 个答案: