Question

您好我正在使用InfoWindow在谷歌地图上获取自定义弹出窗口，但我无法设置宽度，我尝试将其设置为内联到包装标签，但它不起作用。在这种情况下，我需要它是750px。

这是jsfiddle：http://jsfiddle.net/xxast/ 这是html文件：http://www.mediafire.com/view/?66dbe6xzn1mul10

以下是设置InfoWindow内容的方法：

 function getContent(parts, kmlEvent) {

                var content = ""+
       "<div id='width800' class='google-infobox-content' >" +
            "<div class='image'>" +
                "<img src='http://maps.google.com/maps/api/staticmap?center=" + kmlEvent.latLng.Ya + "," + kmlEvent.latLng.Za + "&amp;zoom=13&amp;size=150x150&amp;maptype=roadmap&amp;sensor=false&amp;language=&amp;markers=color:red|label:none|48.7758013,9.2529132' title='' width='150' height='150' >" +
                "<br />" +
                "<a href='https://maps.google.com/maps?sensore=true&daddr=" + kmlEvent.latLng.Za + "," + kmlEvent.latLng.Ya + "' target='_blank' >Full Google Map</a>" +
                "<a href='http://maps.google.com/help/maps/directions/Somewhere' target='_blank' >Directions</a>" +
            "</div>" +
            "<div class='location'>" +
                "<p>" + parts[0] + "</p>" +
                "<p>" + parts[1] + "</p>" +
                "<p>" + parts[2] + "</p>" +
                "<br/>" +
                "<p>" + parts[3] + "</p>" +
            "</div>" +
            "<div class='contact'>" +
                "<p>" + parts[4] + "</p>" +
                "<p>" + parts[5] + "</p>" +
                "<a href='mailto:" + parts[6] + "' >" + parts[6] + "</a>" +
                "<a href='" + parts[7] + "' target='_blank' >" + parts[7] + "</a>" +
            "</div>" +
            "<div class='others'>" +
                "<p><b>Product line</b></p>" +
                "<p>" + parts[8] + 
                "</p>" +
            "</div>" +                
        "</div>";

                return content;
            }

更新这里是更新的jsfiddle，包含设置的maxWidth和包装标签的内联宽度，但它仍然不起作用：http://jsfiddle.net/xxast/3/

Answer 1

google.maps.InfoWindowOptions对象中没有width。

在您的信息窗内创建一个div，并设置其宽度 infowindow将调整大小以适应内部div。

我在这里有一个有效的例子：http://jsfiddle.net/RASG/vA4eQ/

修改

一些额外的信息：

我发现in a google group是一个非常有趣的信息，written by a google employee。

信息窗口大小取决于两个因素：


内容的大小

地图的大小（不是浏览器）

要解决这个问题，你必须实现自己的信息。

这里有一些例子：

Answer 2

Google v3 Api附带：

var iw = new google.maps.InfoWindow({ content: some_text, maxWidth: 200 });

此处有更多详情：Controlling the width of a Google Maps InfoWindow

Answer 3

preg_split('/\b(\w*Cars\w*)\b/', $string, -1, PREG_SPLIT_DELIM_CAPTURE | PREG_SPLIT_NO_EMPTY);

Answer 4

在infoWinfow选项中尝试将maxWidth设置为750.另外，为了确保样式不会被默认值覆盖，goole值将google-infobox-content重命名为不同的内容。您可以尝试使用自定义信息窗口库： http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html

Answer 5

制作一个div并使用setcontent将其设置为infowindow，肯定会有效

Google地图设置InfoWindow的宽度

5 个答案:

修改