带有Bootstrap 3和jQuery的Google Map v3的信息窗口在Google Chrome中无法完美运行 [英] Info Window of Google Map v3 with Bootstrap 3 and jQuery not working perfectly in Google Chrome

问题描述

我正在尝试创建一个包含一些单击事件的信息窗口.

I am trying to create a info window with some click events.

但是它不能很好地工作.

But it is not working perfectly.

我在jQuery中做的代码是-

What I have done in jQuery to do my code is-

var infowindow = new google.maps.InfoWindow();

var contentString   =   '<div class="panel panel-default" lat="'+locations[i][1]+'" lon="'+locations[i][2]+'">'
                        +'<!-- Default panel contents -->'
                        +'<div class="panel-heading city_name">'
                            +locations[i][0]
                            +'<span style="float : right;margin-left: 5px;">'
                                +'<img src="img/detailed_information.png" class="detailed_information_image detailed_information_map_button" data-toggle="tooltip" data-placement="right" title="Detailed Information">'
                            +'</span>'
                            +'<span style="float : right">'
                                +'<img src="img/set_radious.png" class="set_radious_image change_center_map_button" data-toggle="tooltip" data-placement="left" title="Set Map Center">'
                            +'</span>'
                        +'</div>'
                        +'<div class="panel-body">'
                            +'<table>'
                                +'<tr>'
                                    +'<td class="td_list_center list_item_10 temparature">'
                                        +'19&deg;'
                                    +'</td>'
                                    +'<td class="td_list_center list_item_10">'
                                        +'<object data="svg/cloudDrizzleSun.svg" type="image/svg+xml">'
                                            +'<img src="img/svg-not-supported.png" />'
                                        +'</object>'
                                        +'<!-- <img src="svg/cloudDrizzleSun.svg" /> -->'
                                    +'</td>'
                                    +'<td class="td_list_center list_item_60 seperated_left">'
                                        +'<table>'
                                            +'<tr>'
                                                +'<td class="td_list_center status">'
                                                    +'<table>'
                                                        +'<tr>'
                                                            +'<td>'
                                                                +'<img src="img/umbrella.png" alt="Umbrella Logo Dark Small">'
                                                                +'<span id="humidity_value">280</span> mm'
                                                            +'</td>'
                                                            +'<td>'
                                                                +'<img src="img/wind.png" alt="Wind Logo Dark Small">'
                                                                +'<span id="wind_speed">280</span> km/h'
                                                            +'</td>'
                                                            +'<td>'
                                                                +'<img src="img/temperature.png" alt="Umbrella Logo Dark Small">'
                                                                +'<span id="temperature_speed">280</span>&deg; K'
                                                            +'</td>'
                                                        +'</tr>'
                                                    +'</table>'
                                                +'</td>'
                                            +'</tr>'
                                            +'<tr>'
                                                +'<td class="td_list_center distance">'
                                                    +'By car 127 KM - 2hr 6 min.'
                                                +'</td>'
                                            +'</tr>'
                                        +'</table>'
                                    +'</td>'
                                +'</tr>'
                            +'</table>'
                        +'</div>'
                    +'</div>';

        infowindow.setContent(  contentString   );
        infowindow.open(map, marker);

并像这样在Firefox中获得输出-

And getting a output in Firefox like it-

但是却能在Chrome中获得类似的输出-

But getting a output in Chrome like it-

有人可以帮我吗?

预先感谢您的帮助

推荐答案

如注释中所述，您可能希望在HTML或CSS中设置内容宽度.除此之外，信息窗口还具有maxWidth属性.

As stated in the comments, you may want to set your content width in your HTML or using CSS. Aside from that, infowindows have a maxWidth property.

maxWidth指定信息窗口的最大宽度(以像素为单位).默认情况下，信息窗口会扩展以适合其内容，如果信息窗口填满了地图，则会自动换行文本.如果添加maxWidth，则信息窗口将自动换行以强制执行指定的宽度.如果达到最大宽度并且屏幕上有垂直空间，则信息窗口可能会垂直扩展.

maxWidth specifies the maximum width of the info window in pixels. By default, an info window expands to fit its content, and auto-wraps text if the info window fills the map. If you add a maxWidth the info window will auto-wrap to enforce the specified width. If it reaches the maximum width and there is vertical room on the screen, the info window may expand vertically.

https://developers.google.com/maps/documentation/javascript/infowindows

其他信息:

maxWidth信息窗口的最大宽度，与内容的宽度无关.仅当在打开呼叫之前设置此值时，才考虑该值.要在更改内容时更改最大宽度，请调用close，setOptions，然后打开.

maxWidth Maximum width of the infowindow, regardless of content's width. This 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.

https://developers.google.com/maps/documentation/javascript/reference#InfoWindow

这篇关于带有Bootstrap 3和jQuery的Google Map v3的信息窗口在Google Chrome中无法完美运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！