在放大/缩小谷歌地图时更改信息窗口的位置答案

【问题标题】：Change the position of info window while zoom in/out the google map在放大/缩小谷歌地图时更改信息窗口的位置
【发布时间】：2018-09-27 06:08:19
【问题描述】：

我在我的网站上使用了一个时髦的谷歌地图插件。但是存在一个问题，即当谷歌地图放大/缩小时，信息窗口保留在同一位置。我们如何根据谷歌地图更改信息窗口位置？

【问题讨论】：

标签： javascript jquery snazzymaps

【解决方案1】：

您需要在缩放时跟踪位置，并手动放置窗口。

使用它来检测缩放：

  map.addListener('zoom_changed', function() {
    infowindow.setContent('Zoom: ' + map.getZoom());
  });

然后获取 DOM 元素并交换它的位置，无论如何。如果您将 DOM 元素置于固定或绝对位置，则不应更改。如果您想使用 google maps api 制作它。你可以使用这个：

infobox = new InfoBox({
         content: document.getElementById("infobox"),
         disableAutoPan: false,
         maxWidth: 150,
         pixelOffset: new google.maps.Size(-140, -45),
         zIndex: null,
         boxStyle: {
            background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') 0% 100% no-repeat",
            opacity: 0.75,
            width: "280px"
        },
        infoBoxClearance: new google.maps.Size(1, 1),
        alignBottom: true
    });

infobox 是您的 DOM 元素，它将从中获取内容。 alignBottom: 让它总是粘在底部。

如果您想自定义其缩放位置，请使用缩放事件侦听器，然后交换其偏移量。

var ib= new InfoBox({
    ....//other properties,
    pixelOffset: new google.maps.Size(-25, 0) //where your marker's height is 25px
});

来源：

Fitbounds [Stackoverflow]

Info Box position[Stackoverflow]

【讨论】：