谷歌地图标记信息旁边的标记位于标记旁边

时间:2013-11-20 20:40:22

标签: javascript google-maps google-maps-api-3 google-maps-markers markerclusterer

昨天我没有得到足够的关注post但是在做了一些研究之后我想知道如何将信息框放置在google标记上而不是在pin上,但类似于此{{ 3}}当您将鼠标悬停在一组标记上时,信息框显示在同一点,因此鼠标输出事件不会被触发,因为鼠标仍在标记组上。我想知道如何通过昨天的帖子实现类似的功能。 所以要结束帖子,有没有我可以应用的样式代码,所以我可以在标记上显示信息框?  非常感谢每一条建议。 谢谢,Laziale

2 个答案:

答案 0 :(得分:5)

默认设置为140px,因此分别设置x和y的值,每次都会出现该框。

您可以自行安排的偏移值。

试试这段代码..

 var infowindows = []; //make it global
 var popup = new InfoBox({
      // size: new google.maps.Size(420,130),
        content:content_info
       ,pixelOffset: new google.maps.Size(10, -100) //these are the offset values to be adjusted accordingly..
       ,disableAutoPan: false
       ,closeBoxMargin: "5px 5px 2px 2px"
       ,boxStyle: {opacity: 0.95
              }

    });

infowindows.push(popup);
 google.maps.event.addListener(marker, 'mouseover', function() {
        close_popups();
        map.panTo(mycenter1);
        popup.open(map, marker);


        // currentPopup = null;
      });

function close_popups(){
      for(var i = 0; i<infowindows.length; i++){
        infowindows[i].close();
      }
    }

答案 1 :(得分:2)

您可以使用alignBottom的{​​{1}}和pixelOffset属性来实现您的目标。我创造了一个小提琴,虽然看起来很糟糕,但我认为它可以让你在实施方面走上正轨。在你开始工作后,你可以根据自己的喜好对其进行润色:) FIDDLE

基本上,您可以指定以下选项:

InfoBox

您可以根据自己的喜好调整pixelOffset,以便内容显示在标记上并且不会触发mouseout。

然后你这样做绑定到mouseover事件(你可能已经知道):

var ibOptions = {
    content: 'your content',
    pixelOffset: new google.maps.Size(-5, -15),
    alignBottom: true
};