时间戳

首页 > 解决方案 > 放大/缩小谷歌地图时更改信息窗口的位置

javascript - 放大/缩小谷歌地图时更改信息窗口的位置

问题描述

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

标签： javascriptjquerysnazzymaps

解决方案

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

使用它来检测缩放：

  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]

推荐阅读