infowindows上删除右边距和底部边距 [英] Remove right and bottom margin on infowindows
本文介绍了infowindows上删除右边距和底部边距的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在玩Google InfoWindow。
几乎所有东西都是完美的。我只是在窗户上遗漏了一些东西。
我总是有一个右和底部的空白区域。
我不介意那么多，但我想摆脱正确的。
任何想法怎么做？
编辑，这里是代码：
< div class =gm-style -iwstyle =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& amp; amp; pitch = 10& amp; amp; amp; sensor = falsealt =>
< div class =shadow>< / div>
< div class =title>客户历史< br> 123 Foo Av，旧金山，CA 12345< / div>
< / div>
< div class =wrap clearfix>
< div class =item clearfix>
< small> 2013-09-11< / small>
< p>这是对客户历史购买的测试。< / p>
< div class =row clearfix>
< div class =col-lg-5>成本估算< span> $ 11000< / span>< / div>
< div class =col-lg-7>购买编号< span> 123456789< / span>< / div>
< / div>
< div class =row clearfix>
< div class =col-lg-12>卖< a href =>我的网上卖家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;
剩下：0！重要;
font-size：15px！important;
font-weight：normal！important;
top：0！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标签，.gm样式.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％;
身高：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;
位置：绝对;
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％;剩下
：41％;
位置：绝对;
display：block;
背景：透明网址（'http://d3flf7kkefqaeh.cloudfront.net/_assets/3/pointer_down.png'）;
}＃info-map-element .wrap {
padding：0;
}
＃info-map-element .wrap .item：nth-child（偶数）{
background：#ececec;
}
＃info-map-element .wrap .item {
padding：10px;
} #legend strong {
float：left;
margin：0 10px 0 0;
display：block;
}
EDTI＃2：
所以我可以改变dom的方式我想用Jquery。这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'）;
但是由于某种原因，只有第一行被执行。 >解决方案
您需要先删除infowindow背景和阴影，然后应用您自己的CSS。
JS部分
/ *
* google.maps.event.addListener（）事件等待
*创建infowindow HTML结构'domready'
*，并在infowindow定义的样式打开之前创建
*。
* /
google.maps.event.addListener （infowindow，'domready'，function（）{
//引用使用jQuery接收infowindow内容的DIV
var iwOuter = $（'。gm-style-iw '）;
/ *我们想要改变的DIV位于.gm-style-iw DIV之上。
*因此，我们使用jQuery并创建一个iwBackground变量
*，并利用现有的.gm-style-iw引用来使用.prev（）以前的DIV。
* /
var iwBackground = iwOuter.prev（）;
//移除背景阴影DIV
iwBackground.children（'：nth-child（2）'）。css（{'display'：'none'}）;
//删除白色背景DIV
iwBackground.children（'：nth-child（4）'）。css（{'display'：'none'}）;
}）;
CSS部分（示例）
.gm-style-iw {
width：350px！important;
top：0！important;
剩下：0！重要;
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;
}
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>$11000</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"
$(".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.
解决方案
You need to first remove the infowindow background & shadow, then apply your own css.
JS part
/*
* 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)
.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;
}
这篇关于infowindows上删除右边距和底部边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
