从信息框添加一行到标记API v3

时间:2016-08-03 19:43:25

标签: javascript google-maps-api-3 infobox

我创建了带有自定义.gif图像的地图来代替标记。然后创建了一个信息框,该信息框必须与图像保持一定距离。将有几个图像,每个图像都有一个信息框。我想要做的是在信息框中添加一条线到图像,这样当屏幕变得杂乱时,很明显哪些信息框是图像的信息框。 在两个lat / lng点之间绘制的线是不好的,因为信息框以像素显示,而不是lat / lng,并且这样的线与信息框无关,因此不会像信息框那样隐藏/可见。 这可能吗? 我使用infobox.js 这是我的信息框代码。

infobox = new InfoBox({
     content: document.getElementById("infobox1"),
     disableAutoPan: false,
     maxWidth: 200,
     pixelOffset: new google.maps.Size(-140, -150),
     zIndex: null,
     boxStyle: {
        width: "150px"
    },
    closeBoxMargin: "12px 4px 2px 2px",
    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
    infoBoxClearance: new google.maps.Size(1, 1)
});
infobox.open(map, marker);

代码有效。我展示它以防止它与我想做的事情有关。

这是我的div。

<div id='infobox-wrapper'>
  <div id='infobox1'> this is text text</div>
</div>

使用此css找到解决方案

.infoBox:before{
 content : " ";
 width: 0;
 height: 0;
 border-left: 1px solid transparent;
 border-right: 1px solid transparent;
 border-bottom: 70px solid #000;
 position:absolute;
 top:-80px;
 left:130px;
}

0 个答案:

没有答案