谷歌地图：如何将 HTML 元素添加到特定坐标？答案

【问题标题】：Google Maps: How to add HTML elements to specific coordinates?谷歌地图：如何将 HTML 元素添加到特定坐标？
【发布时间】：2011-01-10 04:15:17
【问题描述】：

我想知道如何以及是否可以将标准 HTML 元素（div、按钮）添加到地图上的特定坐标集？

例如，我有一组坐标，我想为它们附加一个自定义气球通知

当我平移远离坐标时，元素应该消失，当我平移回它们时，元素应该重新出现。

谷歌地图可以做到这一点吗？

【问题讨论】：

标签： javascript google-maps overlay google-maps-markers

【解决方案1】：

您可以使用自定义叠加层 - https://developers.google.com/maps/documentation/javascript/customoverlays

【讨论】：

这正是我想要的！非常感谢！
所有叠加层都需要 bounds 属性吗？是否可以将叠加层集中在一对 lat+lng 坐标上（即来自标记）？

【解决方案2】：

正如罗马所说，您可以创建一个实现GOverlay 的自定义javascript 对象。

这是另一个 S.O. 的示例。这个家伙想在谷歌地图上插入 SVG 的问题。不过我很确定你可以使用他的解决方案来插入 HTML。

How can I overlay SVG diagrams on Google Maps?

【讨论】：

【解决方案3】：

如果您想制作自定义气球，请参阅以下问题：

Google Maps Bubble Templates

【讨论】：

我不想只显示通知窗口（气泡）。谢谢！

【解决方案4】：

您要查看的是openInfoWindowHtml 函数。您需要先将marker 添加到地图中。查看 Google 上的 this example 以获得一个很好的例子，并结合了漂亮的最大化功能。

【讨论】：

我需要在地图上的某些坐标中添加一个纯 HTML 元素，而不是在 Google Maps 原生通知窗口内。谢谢！

【解决方案5】：

请参阅this 作为最新 Google Maps API 版本 (v3) 的基类：

用法：

var rectBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(54.478490, 18.550357),
    new google.maps.LatLng(54.478434, 18.551952)
);
var obj = new overlayText(rectBounds, 'Some<br />HTML', objGMap3);

【讨论】：