Javascript 控制 Google Maps InfoWindow 的宽度

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3844314/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 06:21:13  来源:igfitidea点击:

Controlling the width of a Google Maps InfoWindow

javascriptgoogle-mapsgoogle-maps-api-3

提问by rg88

Anyone know how to set the width of the InfoWindow in Google Maps? The infowindow is the cartoon like bubble that pops up when you click on a point in Google Maps. I can control the height via CSS but cannot figure out how to change the width (I want thinner than the default infowindow).

有谁知道如何在谷歌地图中设置信息窗口的宽度?信息窗口是当您单击 Google 地图中的某个点时弹出的卡通状气泡。我可以通过 CSS 控制高度,但无法弄清楚如何更改宽度(我想要比默认信息窗口更薄)。

I found a reference to maxWidth in the API but I cannot figure out where to put this. Any ideas?

我在 API 中找到了对 maxWidth 的引用,但我不知道把它放在哪里。有任何想法吗?

回答by fortboise

For v3 of the API, the InfoWindowOptions.maxWidthproperty does what you're asking for. The InfoWindowconstructor takes an optional argument of an InfoWindowOptionsobject.

对于 API 的 v3,该InfoWindowOptions.maxWidth属性可以满足您的要求。该InfoWindow构造函数采用的可选参数InfoWindowOptions对象。

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

The documentationnotes that the "value is only considered if it is set before a call to open. To change the maximum width when changing content, call close, setOptions, and then open."

文档指出,“仅在调用 open 之前设置值时才考虑值。要在更改内容时更改最大宽度,请调用 close、setOptions,然后调用 open。”

回答by Jaimoto

You can override the style of Google Maps.

您可以覆盖 Google 地图的样式。

/* Just use .gm-style-iw */ 
.gm-style-iw {
  width: 300px; 
  min-height: 150px;
}

Source: https://katz.co/resizing-infowindow/

来源:https: //katz.co/resizing-infowindow/

回答by morteza khadem

you can add div at first like this:

您可以首先像这样添加 div:

<div style='width:300px;margin:0 0 20px 20px;height:90px;'>