javascript 删除信息窗口的右下边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21542870/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove right and bottom margin on infowindows
提问by bl0b
I'm playing around with the google InfoWindow.
我在玩谷歌信息窗口。
And almost everything is perfect. I'm Just missing something on the windows.
而且几乎一切都是完美的。我只是在窗户上遗漏了一些东西。
I always have a right and bottom white space.
我总是有一个右边和底部的空白。
I don't mind that much for the bottom one but I'd like to get rid of the right one.
我不介意最底层的那个，但我想摆脱正确的那个。
Any idea how to do that ?
知道怎么做吗？
EDIT, here is the code:
编辑，这里是代码：
<div class="gm-style-iw" style="position: absolute; left: 12px; top: 9px; overflow: auto; width: 352px; height: 290px;">
<div class="" style="overflow: auto;">
<div class="infoBox">
<div style="max-width: 352px; padding: 0px;">
<div id="info-map-element">
<div class="street">
<img src="http://maps.googleapis.com/maps/api/streetview?size=360x190&location=37.7831059,-122.4446528&fov=90&heading=235&pitch=10&sensor=false" alt="">
<div class="shadow"></div>
<div class="title"> Customer History<br> 123 Foo Av, San Francisco, CA 12345</div>
</div>
<div class="wrap clearfix">
<div class="item clearfix">
<small>2013-09-11</small>
<p>This is the a test of customer history purchases.</p>
<div class="row clearfix">
<div class="col-lg-5"> Cost Estimate <span>000</span></div>
<div class="col-lg-7"> Purchase No. <span>123456789</span></div>
</div>
<div class="row clearfix">
<div class="col-lg-12"> Sell by <a href="">My Online seller dot com</a></div>
</div>
</div>
<div class="row clearfix"></div>
</div>
</div>
</div>
</div>
</div>
#map_newsfeed .gm-style-iw {
width: 352px!important;
height: auto!important;
left: 0!important;
font-size: 15px!important;
font-weight: normal!important;
top: 0!important;
overflow: hidden!important;
border-radius: 3px;
}
#map_newsfeed .gm-style-iw > div {
overflow: hidden!important;
}.gm-style .gm-style-iw, .gm-style .gm-style-iw a, .gm-style .gm-style-iw span, .gm-style .gm-style-iw label, .gm-style .gm-style-iw div {
font-size: 13px;
font-weight: normal;
}#info-map-element .row > div {
font-size: inherit;
font-weight: inherit;
}
#info-map-element .shadow {
width: 100%;
height: 100%;
bottom: 0;
-webkit-box-shadow: 0 -35px 75px rgba(0,0,0,0.95) inset;
box-shadow: 0 -35px 75px rgba(0,0,0,0.95) inset;
position: absolute;
font-style: normal;
font-weight: normal;
z-index: 1;
}
#map .gm-style {
font-family: inherit;
}#info-map-element .pagination {
margin: 10px 0 0;
}
.infoBox > img {
position: absolute;
top: 0px;
right: 25px;
display: block;
z-index: 3;
}
#info-map-element .pointer {
width:23px;
height:19px;
top: 99%;
left: 41%;
position:absolute;
display:block;
background: transparent url('http://d3flf7kkefqaeh.cloudfront.net/_assets/3/pointer_down.png');
}#info-map-element .wrap {
padding: 0;
}
#info-map-element .wrap .item:nth-child(even) {
background: #ececec;
}
#info-map-element .wrap .item {
padding: 10px;
}#legend strong {
float: left;
margin: 0 10px 0 0;
display: block;
}
EDTI #2: So I can change the dom the way I want it with Jquery. Those 3 lines work"
EDTI #2：所以我可以用 Jquery 按照我想要的方式更改 dom。这 3 行工作”
$(".gm-style-iw").next("div").css("right", '52px');
$(".gm-style-iw").prev("div").children().last().css("width", '351px');
$($(".gm-style-iw").prev("div").children()[1]).css("width", '351px');
But for some reason only the first line get executed.
但由于某种原因，只有第一行被执行。
采纳答案by gowithefloww
You need to first remove the infowindow background & shadow, then apply your own css.
您需要先删除信息窗口背景和阴影，然后应用您自己的 css。
JS part
JS部分
/*
* The google.maps.event.addListener() event waits for
* the creation of the infowindow HTML structure 'domready'
* and before the opening of the infowindow defined styles
* are applied.
*/
google.maps.event.addListener(infowindow, 'domready', function() {
// Reference to the DIV which receives the contents of the infowindow using jQuery
var iwOuter = $('.gm-style-iw');
/* The DIV we want to change is above the .gm-style-iw DIV.
* So, we use jQuery and create a iwBackground variable,
* and took advantage of the existing reference to .gm-style-iw for the previous DIV with .prev().
*/
var iwBackground = iwOuter.prev();
// Remove the background shadow DIV
iwBackground.children(':nth-child(2)').css({'display' : 'none'});
// Remove the white background DIV
iwBackground.children(':nth-child(4)').css({'display' : 'none'});
});
CSS part (example)
CSS 部分（示例）
.gm-style-iw {
width: 350px !important;
top: 0 !important;
left: 0 !important;
background-color: #fff;
box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
border: 1px solid rgba(72, 181, 233, 0.6);
border-radius: 2px 2px 0 0;
}
回答by Ivan Vilch
For those who are still looking for solution. Angular 8, helped the code below to remove the paddings and hide the close button for agm-info-window.
Basically, overflow: scrollin .gm-style-iw-delement creates that space.
对于那些仍在寻找解决方案的人。Angular 8，帮助下面的代码删除填充并隐藏 agm-info-window 的关闭按钮。基本上，overflow: scroll在.gm-style-iw-d元素中创建了那个空间。
/* hide close button in info-window */
::ng-deep button.gm-ui-hover-effect {
visibility: hidden;
}
/* clear the paddings */
::ng-deep .gm-style .gm-style-iw-c {
padding: 0;
}
/* remove the white space */
::ng-deep .gm-style-iw .gm-style-iw-d {
overflow: auto !important;
}
回答by Francisco Gonzalez Rull
The padding is caused by the scroll applied to the .gm-style-iw-ddiv, this would remove it but be careful and make sure all your content fits inside the max width and height of the info window cause otherwise it will be hidden.
填充是由应用于.gm-style-iw-ddiv的滚动引起的，这会删除它，但要小心并确保您的所有内容都适合信息窗口的最大宽度和高度，否则它将被隐藏。
.gm-style-iw-d {
overflow: hidden !important;
}
回答by Diogo Amaral
You should stop to try fix height/width and set it auto.
Try to change this line:
您应该停下来尝试修复高度/宽度并将其设置为自动。
尝试更改此行：
<div class="gm-style-iw" style="position: absolute; left: 12px; top: 9px; overflow: auto; width: 352px; height: 290px;">
To this:
对此：
<div class="gm-style-iw" style="position: absolute; left: 12px; top: 9px; overflow: auto; width: auto; height: auto;">
In the Css change:
在 CSS 更改中：
#map_newsfeed .gm-style-iw {
width: 352px!important;
height: auto!important;
left: 0!important;
font-size: 15px!important;
font-weight: normal!important;
top: 0!important;
overflow: hidden!important;
border-radius: 3px;
}
To:
到：
#map_newsfeed .gm-style-iw {
width: auto!important;
height: auto!important;
left: 0!important;
font-size: 15px!important;
font-weight: normal!important;
top: 0!important;
overflow: hidden!important;
border-radius: 3px;
}
It should solve your problem, if not, please show the full code (html/css).
它应该可以解决您的问题，如果没有，请显示完整代码（html/css）。
