【问题标题】:google maps infobox position next to marker not over the marker谷歌地图信息框位置靠近标记而不是标记
【发布时间】:2013-12-05 01:43:43
【问题描述】:

昨天我对这个post 没有足够的关注,但是在做了更多的研究之后,我想知道如何将谷歌标记的信息框定位在别针上,但类似于website 时您将鼠标悬停在标记组上,信息框会显示在同一点,因此不会触发 mouseout 事件,因为鼠标仍在标记组上方。我想知道如何通过昨天的帖子实现类似的目标。 所以要结束这篇文章,是否有任何我可以应用的样式代码,以便我可以在标记上显示信息框? 每一个建议都非常非常感谢。 谢谢,Laziale

【问题讨论】:

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


    【解决方案1】:

    默认设置在右边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();
          }
        }
    

    【讨论】:

      【解决方案2】:

      您可以使用InfoBoxalignBottompixelOffset 属性来实现您想要的。我创建了一个看起来很糟糕的小提琴,但我认为它可以让你在实现方面走上正确的轨道。你可以在它工作后根据自己的喜好对其进行打磨:) FIDDLE

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

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

      您可以根据自己的喜好调整pixelOffset,这样内容就会显示在标记上并且不会触发鼠标移出。

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

      google.maps.event.addListener(marker, "mouseover", function (e) {
          ib.open(map, this);
      });
      

      【讨论】:

      • thx 我正在检查您的示例,但是当我将鼠标悬停在信息框上时,信息框消失了,请检查这个包含鼠标移出功能的更新示例。 jsfiddle.net/r5kq5/1
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2017-12-29
      • 2011-08-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-07-20
      相关资源
      最近更新 更多