我在我的网站上使用了一个时髦的谷歌地图插件。但是存在一个问题,即当谷歌地图放大/缩小时,信息窗口保留在同一位置。我们如何改变信息窗口的位置取决于谷歌地图?
user8308116
问问题
413 次
1 回答
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
});
资料来源:
于 2018-09-27T06:19:23.243 回答