Question

我有一个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的要求。谁能建议我该怎么做或应该改变什么？

Answer 1

在CSS的代码中，您将“＃”用作类选择器，而将“。”

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

Answer 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

2 个答案: