Question

如何设置Google地图InfoWindow的大小和宽度？我看了on the api page并且只找到了maxWidth方法。

编辑：我尝试过一些事情。到目前为止，这些都不起作用：

    var markerInfoWindow = new google.maps.InfoWindow({
        content: markerHTMLString,
        maxHeight: 400,  //Doesn't work
        maxWidth: 400,   //Doesn't work
        width: 300,      //Doesn't work
        height: 300      //Doesn't work
    });

另外说markerHTMLString等于：

<div class = "MarkerPopUp"><div class = "MarkerContext">Text</div></div>

我也试过这三个选项（没有一个可以使用）

.MarkerPopUp {
    height: 300px;
    width: 300px;
}

.MarkerPopUp {
    height: 300px;
    width: 300px;
}

.MarkerContext {
    height: 300px;
    width: 300px;
}

.MarkerContext {
    height: 300px;
    width: 300px;
}

这也行不通：

document.getElementById('MarkerPopUp')parentNode.style.overflow = '';

或者

document.getElementById('MarkerPopUp').parentNode.parentNode.style.overflow = '';

我几乎经历了我能找到的所有线索并尝试了一切。只是为了限制一些事情（尽管可能有另一个问题）

Answer 1

可能是当html传递到地图api并解析出它无法访问样式表的时候。尝试在MarkerPopUp上将您的宽度添加为内联样式。

<div class = "MarkerPopUp" style="width: 300px;"><div class = "MarkerContext">Text</div></div>

我知道，我也讨厌内联样式，但在这种情况下它可以解决你的问题。

Answer 2

.gm-style-iw{
    max-height: 10px;
}

设置gm-style-iw的样式可以完成工作！

Answer 3

在css中使用！important

public void update() {
    List<Cupcake> cake = back.getCake();
    for (int i = 0; i < cake.size(); ++i) {
        Cupcake cupcake = cake.get(i);
        checkCollisionCup(cupcake);
        if (cupcake.isEaten()) 
            cake.remove(i);
    }
}

Answer 4

您可以使用包装器<div>并添加类似<div style='height: 40px; text-align: center'>的样式，并在css文件中添加css代码.gm-style-iw { max-width: 400px!important;};

Answer 5

请尝试以下代码：

 infowindow = new google.maps.InfoWindow({
        content: "",
        maxWidth: 200 ,
        maxHeight: 400
    });

谷歌地图.InfoWindow设置高度和宽度

5 个答案: