具有动态自动定位功能的 Google Maps V3 工具提示弹出窗口答案

【问题标题】：Google Maps V3 tooltip popup with dynamic auto-positioning具有动态自动定位功能的 Google Maps V3 工具提示弹出窗口
【发布时间】：2011-12-29 13:49:38
【问题描述】：

我正在寻找一个可与 Google Maps V3 一起使用的弹出窗口，它支持相对于标记自动定位弹出窗口，以便整个弹出窗口始终在地图视口中可见。我正在尝试破解 InfoBox 库来完成这项工作，但事实证明这是一个很大的麻烦。我还查看了 QTip2，它显示出一些前景，但也有一些缺点，例如定位，但必须手动设置。

编辑：解决方案需要不平移地图以显示弹出窗口。

【问题讨论】：

我也想做同样的事情。似乎无法找到破解 infoBox 以选择最佳位置的方法。
我真的让它工作了。我将在下面发布答案。

标签： google-maps popup tooltip positioning

【解决方案1】：

我在V3 Demo Gallery 的快速搜索中找到了SmartInfoWindow。它似乎只是你想要的。这是google code project。

【讨论】：

那个很接近，但我忘了说我不能让地图平移来显示整个弹出窗口。 :( InfoBox 也可以平移以显示弹出窗口。
我猜你是对的。当我短暂地玩弄演示时，它以避免平移的方式打开了信息窗口。但现在我看到它并不能在所有情况下都避免平移。无赖。

【解决方案2】：

在 SmartInfoWindow 的帮助下，我能够添加到 InfoBox 以使其完成我想做的事情。这是一个部分定制的解决方案，因此您可能需要调整定位。您只需获取 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';
    }        
  }


};

【讨论】：

这个怎么用？我需要在 infobox.open() 之前调用 infobox.maybePanMap() 吗？
我称之为 this.maybePanMap();在 infobox.js 文件中绘制函数的末尾。
谢谢！这绝对是完美的！