谷歌地图信息框位于标记旁边，而不是标记上方

Google Maps infobox position next to marker not over the marker

本文关键字：信息 于标记 谷歌地图      更新时间：2023-09-26

我想知道如何定位谷歌标记的信息框，而不是在大头针上，而是类似于这个网站的东西。这里，当您将鼠标悬停在标记组上时，信息框会显示在同一点，因此不会触发mouseout事件，因为鼠标仍在标记组上方。

我想知道我如何才能在昨天的帖子中取得类似的成绩。最后，有没有什么样式代码可以应用，这样我就可以在标记上显示信息框？

默认情况下，它在右侧设置为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();
      }
    }

您可以使用InfoBox的alignBottom和pixelOffset属性来实现您想要的。我创建了一个小提琴，无可否认它看起来很糟糕，但我认为它可以让您在实现方面走上正轨。工作后，您可以根据自己的喜好进行打磨：）FIDDLE

基本上，您可以指定以下选项：

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

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

然后执行此操作以绑定到mouseover事件（您可能已经知道）：

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