10

我使用此代码创建标记和单击标记后显示的信息窗口：

// latLng and map are created earlier in code
 var marker = new google.maps.Marker({
        position: latLng,
        map: map
    });

// contentString is just a string with content also created earlier
google.maps.event.addListener(marker, 'click', function(){
        infowindow.setContent(contentString);
        infowindow.open(map, marker);
    });

这段代码产生的一切都很好，除了一件事，它没有在信息窗口的右上角显示关闭图标。

在此处输入图像描述

任何人都知道可能是什么问题？

如果有什么不同，我正在使用meteor.js

这就是我创建的方式InfoWindow：

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

4 回答 4

35

这是问题的解决方案......似乎谷歌地图有一些处理图像的有趣方式，并且正如我们所想的那样，css存在问题。所以解决方案就是将其添加到您的 css 文件中：

img 
{
    max-width: none;
}

就是这样，享受。

于 2013-09-02T19:45:29.503 回答
12

我有同样的问题。就我而言，信息窗口不显示指向标记的指针。信息窗口中也有一些看起来很奇怪的图像。

显然，这与引导程序中的样式表与谷歌冲突有关。下面是一个更具体的 CSS，而不是覆盖一般的 CSS

/** FIX for Bootstrap and Google Maps Info window styes problem **/
img[src*="gstatic.com/"], img[src*="googleapis.com/"] {
max-width: none;
}
于 2013-11-08T09:13:55.960 回答
6

根据其他 css 样式，您可能需要添加 !important 覆盖...

img[src*="gstatic.com/"], img[src*="googleapis.com/"] {
max-width: none !important;
}
于 2014-07-17T04:17:30.063 回答
0

这可能有点晚了，但是对于那些正在寻找答案的人来说。解决方案是 CSS 覆盖。在您的 CSS 设置中查找以下 CSS 值：

.gm-ui-hover-effect{
    top: -27px !important;
    right: -3px !important;
    background: #ddd !important;
    border: 1px solid #000 !important;
    border-radius: 50%;
    width: 30px !important;
    height: 30px !important;
    opacity: 1;}
.gm-ui-hover-effect img{margin: -8px 6px !important;
    width: 16px !important;
    height: 16px !important;}
   .gm-style .gm-style-iw {
    width: 282px !important;
    left: 0px !important;
    padding-left: 10px;
}

使用这些覆盖，能够成功地让按钮出现（删除顶部和右侧的值），但也能够格式化我想要使用的关闭按钮类型。根据您系统上安装的主题或其他插件，您的 CSS 值可能会有所不同。但是 .gm_ui_hover-effect 和 .gm-ui-hover-effect 是关键。

在这里找到了解决方案的线索： https ://codepen.io/Marnoto/pen/xboPmG

结合使用 Chrome 中的“检查”选项。

于 2019-03-02T18:56:41.757 回答