如何更改信息窗口背景颜色
How to change the InfoWindow Background color
我遇到了问题,我的 google 地图 API 显示带有背景色的默认信息窗口 white.I 想将白色更改为黑色。
参考代码:
google.maps.event.addListener(marker, 'mouseover', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
//infoWindow.setStyle("background-color: red");
});
您可以在 Google Maps Utility 中使用 InfoBox。
此 class 的行为类似于 google.maps.InfoWindow,但它支持多个用于高级样式的附加属性。信息框也可以用作地图标签。
我想到了一个简单的解决方案。这可能不是一个非常优雅的解决方案,但如果您没有大量的样式需求,它可以正常工作。
因为我们可以添加自己的 html 并设置样式。标记背景元素主要是导致问题的元素。对于简单的样式,我们可以使用 jQuery 删除该元素,而不是学习一个全新的库。
将此代码插入您的初始化函数,它将删除背景元素。
google.maps.event.addListenerOnce(map, 'idle', function(){
jQuery('.gm-style-iw').prev('div').remove();
});
现在,您可以自由设计自己的 div。我使用这种方法在我的项目中设置了 infoWindow 的样式。
希望对您有所帮助。
这对我有用 :
.gm-style .gm-style-iw-d::-webkit-scrollbar-track,
.gm-style .gm-style-iw-d::-webkit-scrollbar-track-piece,
.gm-style .gm-style-iw-c,
.gm-style .gm-style-iw-t::after {
background: red;
}
我遇到了问题,我的 google 地图 API 显示带有背景色的默认信息窗口 white.I 想将白色更改为黑色。 参考代码:
google.maps.event.addListener(marker, 'mouseover', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
//infoWindow.setStyle("background-color: red");
});
您可以在 Google Maps Utility 中使用 InfoBox。
此 class 的行为类似于 google.maps.InfoWindow,但它支持多个用于高级样式的附加属性。信息框也可以用作地图标签。
我想到了一个简单的解决方案。这可能不是一个非常优雅的解决方案,但如果您没有大量的样式需求,它可以正常工作。
因为我们可以添加自己的 html 并设置样式。标记背景元素主要是导致问题的元素。对于简单的样式,我们可以使用 jQuery 删除该元素,而不是学习一个全新的库。
将此代码插入您的初始化函数,它将删除背景元素。
google.maps.event.addListenerOnce(map, 'idle', function(){
jQuery('.gm-style-iw').prev('div').remove();
});
现在,您可以自由设计自己的 div。我使用这种方法在我的项目中设置了 infoWindow 的样式。
希望对您有所帮助。
这对我有用 :
.gm-style .gm-style-iw-d::-webkit-scrollbar-track,
.gm-style .gm-style-iw-d::-webkit-scrollbar-track-piece,
.gm-style .gm-style-iw-c,
.gm-style .gm-style-iw-t::after {
background: red;
}