删除信息窗口的右边距和底边距

bl0b 发表于 Dev

bl0b

我在玩Google InfoWindow。

几乎所有东西都是完美的。我只是窗户上缺少东西。

我总是有一个右下角的空白。

我不介意最底层的那个，但我想摆脱合适的那个。

知道怎么做吗？

编辑，这是代码：

<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&amp;location=37.7831059,-122.4446528&amp;fov=90&amp;heading=235&amp;pitch=10&amp;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：因此，我可以使用Jquery以自己想要的方式更改dom。这三行有效”

$(".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');

但是由于某种原因，只执行第一行。

一起走

您需要先删除信息窗口的背景和阴影，然后再应用自己的CSS。

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部分（示例）

.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;
}

资源

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。