我正在寻找可与Google Maps V3配合使用的弹出窗口,该弹出窗口支持自动定位与标记相关的弹出窗口,以便整个弹出窗口始终在地图视口中可见。我试图破解InfoBox库以使其工作,但事实证明这是一个很大的麻烦。我也看过QTip2,它显示了一些承诺,但也有一些缺点,比如定位,但必须手动设置。
编辑:解决方案需要不平移地图以显示弹出窗口。
答案 0 :(得分:2)
我在SmartInfoWindow快速搜索时找到了V3 Demo Gallery。看起来它只是你想要的。这是google code project。
答案 1 :(得分:1)
我能够添加到InfoBox,让它在SmartInfoWindow的帮助下完成我想要的工作。这是部分定制的解决方案,因此您可能需要调整定位。你只需抓住InfoBox每个角的div位置,将这些角转换回lat / lng,然后抓住地图边界并查看角是否在边界内。如果不是,则根据地图上的哪些角落相应地调整InfoBox位置。
InfoBox.prototype.maybePanMap = function() {
// if we go beyond map, pan map
var map = this.getMap();
var projection = this.getProjection();
var bounds = map.getBounds();
if (!bounds) return;
// The dimension of the infowindow
var iwWidth = this.div_.offsetWidth;
var iwHeight = this.div_.offsetHeight;
// The offset position of the infowindow
var iwOffsetX = this.pixelOffset_.width;
var iwOffsetY = this.pixelOffset_.height;
var anchorPixel = projection.fromLatLngToDivPixel(this.getPosition());
var bl = new google.maps.Point(anchorPixel.x + iwOffsetX,
anchorPixel.y + iwOffsetY);
var br = new google.maps.Point(anchorPixel.x + iwOffsetX + iwWidth,
anchorPixel.y + iwOffsetY);
var tl = new google.maps.Point(anchorPixel.x + iwOffsetX,
anchorPixel.y + iwOffsetY - iwHeight + 100);
var tr = new google.maps.Point(anchorPixel.x + iwOffsetX + iwWidth,
anchorPixel.y + iwOffsetY - iwHeight + 100);
var sw = projection.fromDivPixelToLatLng(bl);
var se = projection.fromDivPixelToLatLng(br);
var nw = projection.fromDivPixelToLatLng(tl);
var ne = projection.fromDivPixelToLatLng(tr);
if (!map.getBounds().contains(nw) && !map.getBounds().contains(sw)) {
this.div_.style.left = (anchorPixel.x + 10) + 'px';
if (!map.getBounds().contains(ne)) {
this.div_.style.top = (anchorPixel.y - 100) + 'px';
}
} else if (!map.getBounds().contains(nw) && !map.getBounds().contains(ne)) {
this.div_.style.top = (anchorPixel.y - 100) + 'px';
if (!map.getBounds().contains(se)) {
this.div_.style.left = (anchorPixel.x - iwWidth - 10) + 'px';
}
} else if (!map.getBounds().contains(ne) && !map.getBounds().contains(se)) {
this.div_.style.left = (anchorPixel.x - iwWidth - 10) + 'px';
if (!map.getBounds().contains(sw)) {
this.div_.style.top = (anchorPixel.y - iwHeight - 100) + 'px';
}
}
};