Google Maps API v3 - 如何在 Map div 之外获取 infoBox答案

【问题标题】：Google Maps API v3 - how to get infoBox outside Map divGoogle Maps API v3 - 如何在 Map div 之外获取 infoBox
【发布时间】：2013-10-21 14:38:32
【问题描述】：

在 Google Map API v3 中，我想将 infoBox（或 infoWindow）显示为一个 div，比如说 30% 的宽度，地图的最大高度，并且它绝对位于地图的左侧。我已经看到了这个实现，其中实际的 infoBox 在 Map div 之外（例如：http://www.londontypographica.com/map/）。

主要问题是 infoBox 的内联样式根据标记的坐标（或在选项中指定）定位框，而且它们似乎相对于地图容器绝对定位。我不知道如何删除那些内联样式。这是这些样式的示例（每次单击标记时都会计算它们，因此我很可能需要禁用该功能或其他东西）：

<div class="infoBox" style="position: absolute; visibility: visible; width: 43px; left: 500.44037546636537px; top: 234.43615104886703px; cursor: default;">(...)<div>

简而言之：我想删除 infoBox 的内联样式（或阻止在单击标记时应用它），并将其移到谷歌地图容器之外（这样我就可以轻松定位和调整元素的大小）。提前致谢！

【问题讨论】：

标签： javascript css google-maps google-maps-api-3

【解决方案1】：

您不必使用信息框。您可以只处理标记单击事件并使用您想要的任何数据填充您想要的任何 div。

这就是您链接到的示例中发生的情况。在标记点击事件中，它使地图在标记上居中，并加载带有相应图像的 div。

【讨论】：

谢谢，这完全可行，尽管它是解决此类问题的“最佳实践”吗？顺便说一句，不想创建新主题，但是您是否有机会知道我可以像我提供的示例中那样更改中心点（当您弹出信息窗口时，标记会向右移动）。
^Nvm 关于居中，发现 panBy 方法可以很好地做到这一点。
@Malyo，这里没有最佳实践。它适用于您的网站。我唯一建议的是确保“外部信息框”与地图画布相邻，而不是屏幕另一侧的某处。也许在视觉上将两者与两个区域周围的某种边界联系起来。或者，如果您想要一个弹出式 div，请尝试确保它不会遮挡地图。