如何样式化谷歌地图信息窗口答案

【问题标题】：how to styling google map infoWindow如何样式化谷歌地图信息窗口
【发布时间】：2019-11-20 02:08:45
【问题描述】：

我有一个 vue-google-map 需要在单击标记时显示一些内容。如何设置 infoWindow 的样式？这是我的代码，它将 id iw-container 调用到 css 表中。

    this.infoWindow.position = location;
    this.infoWindow.template = '<div class="iw-container"><div 
      style="width:100%;">NAME OF PIN</div>'
      + '<div style="width:100%;">name and info</div></div>';
    this.infoWindow.open = true;

这是css：

#iw-container {
  background-color:pink;
}

但是 infoWindow 没有任何反应。

我也尝试将样式直接设置为这样的内容：

this.infoWindow.position = location;
this.infoWindow.template = '<div style="background-color:pink;"><div 
  style="width:100%;">NAME OF PIN</div>'
  + '<div style="width:100%;">name and info</div></div>';
this.infoWindow.open = true;

但是颜色没有完全满足infoWindow。谁能建议我能做什么或我应该改变什么？

【问题讨论】：

你看到this part of the documentation了吗？还有this example（它所指的）？
@geocodezip ，从这个例子中，我认为它可以是这样的。 <gmap-info-window :options="{ maxWidth: 300, pixelOffset: { width: 0, height: -35 }, background: 'blue', //changing background-color }" :position="infoWindow.position" :opened="infoWindow.open" @closeclick="infoWindow.open=false" > 但什么也没发生。背景颜色的最佳变量是什么？我尝试了背景和背景颜色，但都不起作用
这是我将信息窗口背景（和茎/箭头）更改为绿色的示例：jsfiddle.net/geocodezip/1oyertb2/1
谢谢，我会看看它，需要时间来理解它，因为我很难想到如何将这个纯 JS 应用到 vue.js 的东西中。
Styling Google Maps InfoWindow的可能重复

标签： javascript css google-maps

【解决方案1】：

在您的 css 代码中，您使用 '#' 作为类选择器，使用 '.'

.iw-container {
  background-color:pink;
}

【讨论】：

其实我已经尝试过class和id。但两者都不起作用。在我的代码示例中，我忘记将其改回

【解决方案2】：

我正在我当前的项目中使用此代码，并且工作正常。


 map = new google.maps.Map(document.getElementById('map'), {
        zoom: 11,
        center: {lat: 72.231444,lng: 23.443423 }
});

 var infowindow = new google.maps.InfoWindow();
 var lat = 72.231444;
 var lng = 23.443423;
 var marker = new google.maps.Marker({
         position: {lat, lng},
         map: map,
 });
 var infocontent = "<div class='map-box-content'>"+
                "<h4>name</h4>"+
                "<p>address</p>" +
                "</div>";

 google.maps.event.addListener(marker, 'click', function() {
     infowindow.open(map,marker);
     infowindow.setContent(infocontent);
 });

css:

.map-box-content{
    width: 230px;
}

【讨论】：

是的，它起作用了，但是为 infoWindow 设置的背景颜色没有完全覆盖。它只覆盖了
内容并在外层留下了空白