Question

我一直在尝试使用Google Maps API，但我在使用InfoWindow时遇到了麻烦......它似乎总是太小而无法容纳我放在其中的内容，所以我的内容溢出了InfoWindow并在地图上：

Info Window

如果InfoWindow中的内容是动态的或静态的，无论大小，内容周围的白框总是有点小，这似乎没什么区别。

这是我正在测试的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0; padding: 0 }
            #map-canvas { height: 100% }
        </style>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDuV-Jyz8N6b1fVUVCa1EnbPzgeCs9J5_o&sensor=true"></script>
        <script type="text/javascript">
            var districts = [
                    {
                        name: 'Test Spot 1',
                        latitude: 29.680894,
                        longitude: -82.298584
                    },
                    {
                        name: 'Test Spot 2',
                        latitude: 28.323725,
                        longitude: -80.713806
                    }
                ],
                addDistrictMarker = function(district, map, infoWindow) {
                    var position = new google.maps.LatLng(district.latitude, district.longitude),
                        marker = new google.maps.Marker({
                            position: position,
                            map: map,
                            title: district.name
                        });
                    google.maps.event.addListener(marker, 'click', function() {
                        infoWindow.close()

                        var $infoWindowContent = $(infoWindow.content),
                            $title = $infoWindowContent.find('#title');
                        $title.html(marker.title);
                        $infoWindowContent.show();
                        infoWindow.open(map, marker);
                    });
                },
                addDistrictMarkers = function(map, infoWindow) {
                    for (var i=0; i<districts.length; i++) {
                        var district = districts[i];
                        addDistrictMarker(district, map, infoWindow);
                    }
                },
                initialize = function() {
                    var mapOptions = {
                            center: new google.maps.LatLng(27.907058,-81.44165),
                            zoom: 7
                        },
                        map = new google.maps.Map(document.getElementById("map-canvas"),
                            mapOptions),
                        $infoWindowContent = $('#info-window'),
                        infoWindow = new google.maps.InfoWindow({
                            content: $infoWindowContent.get(0)
                        });
                    addDistrictMarkers(map, infoWindow);
                }
            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>
        <div id="map-canvas"></div>
        <div id="info-window" style="display: none;">
            <h1 id="title"></h1>
            <div id="bodyContent">
                <p>A description of some sort...</p>
                <p>
                    And a link:
                    <a href="http://foo.bar.com">http://foo.bar.com</a>
                </p>
            </div>
            <div style="clear: both;"></div>
        </div>
    </body>
</html>

如果/当Google的代码没有自动执行时，我是否有办法告诉Google代码调整InfoWindow的大小？或者我的代码中有一个愚蠢的错误，即阻止谷歌正确调整InfoWindow的大小？

Answer 1

我最终得到了：

infoWindowLinea.setContent(infoWindowLinea.getContent());

更改内容后。这会强制谷歌地图重新计算宽度和高度。

Answer 2

我之前的回答是错误的。

问题是您在不使用方法content和getcontent()的情况下更改infoWindow的属性setcontent，因此infowindow.open()不知道正确的大小。看到这个与你的相同的小改变代码（硬编码的标题更改）：

addDistrictMarker = function(district, map, infoWindow) {
    var position = new google.maps.LatLng(district.latitude, district.longitude),
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: district.name
        });
    google.maps.event.addListener(marker, 'click', function() {
        infoWindow.close()

        var $infoWindowContent = $(infoWindow.content),
            $title = $infoWindowContent.find('#title');

        var iWC = infoWindow.getContent();

        iWC = '<div><h1>My Title</h1><div>Body something to be here><p>A description of some sort...</p><p>And a link:<a href="http://foo.bar.com">http://foo.bar.com</a></p></div></div>'


        //$title.html(marker.title);
        //$infoWindowContent.show();

        infoWindow.setContent(iWC);

        infoWindow.open(map, marker);
    });
},

结果： enter image description here

Answer 3

我发现明确设置用作InfoWindow内容的div的“height”css样式（对我来说是“#info-window”）似乎会导致google的代码正确调整信息窗口的大小。

就我而言，我只是在更改div内容后使用jQuery来计算和设置'height'样式：

$infoWindowContent.height($infoWindowContent.height());

我仍然没有弄清楚是什么原因导致谷歌首先错误地调整窗口大小...动态更改内容不是原因，因为（1）静态内容有同样的问题，（2）谷歌如果/当我动态更改内容时，更改窗口大小，他们只是没有改变它。不知何故，谷歌只是错误估计了规模。但是，明确设置css高度似乎可以解决这个问题。

Answer 4

我的解决方案是设置内容，打开窗口，然后在触发domready事件时，将内容上的height CSS属性设置为高度，然后强制使用Google地图相应地调整InfoWindow的大小。

infoWindow是InfoWindow对象，$infoWindowContents是我要放在其中的内容的Jquery对象，map是我的Map对象。 marker是点击的标记。

infoWindow.setContent($infoWindowContents.get(0));

var listener = google.maps.event.addListener(infoWindow, 'domready', function() {
  // Stop listening, otherwise the listeners stack up if the window is opened again
  google.maps.event.removeListener(listener);

  // Set the height on the container to however tall the browser is currently rendering it
  $infoWindowContents.height($infoWindowContents.height());

  // Force Google Maps to recalculate the InfoWindow height
  infoWindow.setContent($infoWindowContents.get(0));
});

infoWindow.open(map, marker);

（我在类似问题上发布了相同的解决方案Google Maps API v3: InfoWindow not sizing correctly）

Answer 5

我使用这个目的达到了同样的目的：

infoWindow.setContent("<div style = 'display:inline-block'>" + <YOUR_CONTENT> + "</div>");

如何让google-maps InfoWindow调整大小以适应放在其中的内容？

5 个答案: