Google Map v3 InfoBox和closeBox

时间:2012-12-12 23:51:28

标签: html css google-maps

我目前有一个自定义的infoBox,我使用JScript设置属性

var infoBoxOptions =  {
    content: infoContent
    ,disableAutoPan: false
    ,maxWidth: 0
    ,pixelOffset: new google.maps.Size(-140, 0)
    ,zIndex: null
    ,boxStyle: {
      background: "url('/files/0/11/tipbox.gif') no-repeat"
      ,width: "255px"
      ,padding:"9px"
     }        
    ,closeBoxURL: "/files/0/11/icon-close.gif"
    ,infoBoxClearance: new google.maps.Size(1, 1)
    ,isHidden: false
    ,pane: "floatPane"
    ,enableEventPropagation: false
  };

当我检查HTML时,BoxClose图像如下

<img align="right" style=" position: relative; cursor: pointer; margin: 2px;" src="/files/0/11/icon-close.gif">

如何将位置设置为绝对位置,并为关闭按钮提供顶部和右侧属性?

2 个答案:

答案 0 :(得分:2)

截至发布时,closeBoxMargin似乎没有做任何事情。我使用这个来解决这个问题......

.infoBox img {
    top:15px;
}

保证金似乎不再起作用了。希望这有助于某人。


要仅关闭框添加&gt;选择器。

.infoBox > img {
    margin: 36px 10px 2px 2px !important;
}

答案 1 :(得分:1)

有一个名为Close Box Margin的属性,这允许您使用CSS边距定位关闭框。我认为它不会增加绝对位置,但它会让你自由移动关闭框。

//Setting the options for the information window
var infoBoxOptions = {
    closeBoxURL: "/Content/images/TempImages/close.png",
    closeBoxMargin: "-10px -60px 10px 10px"
}

这帮助我将我的关闭盒子准确定位在我需要它的位置。