谷歌地图：如何在特定坐标添加HTML元素？

Question

我想知道是否可以在地图的特定坐标上添加标准的HTML元素（div、button）？例如，我有一组坐标，我想将自定义泡泡通知附加到它们上面。当我从坐标移开时，元素应该消失；当我回到它们时，元素应该重新出现。是否可以使用Google Maps实现此功能？请看下图。

- Cristian Toma

Answer 1

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

- roman

---

所有覆盖层都需要bounds属性吗？是否可以将覆盖层居中于单个经纬度坐标对（例如从标记）？ - o01

Answer 2

正如Roman所说，您可以创建一个自定义的JavaScript对象来实现GOverlay。

这是另一个S.O.问题的示例，其中这个人想在Google地图上方插入一个SVG。但我很确定您可以使用他的解决方案来插入HTML。

我如何在Google Maps上叠加SVG图表？

- jessegavin

Answer 3

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

Google Maps Bubble Templates

- Chris B

---

我不想仅显示通知窗口（气泡）。谢谢！ - Cristian Toma

Answer 4

请将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);

- Nux

Answer 5

你需要查看的是openInfoWindowHtml函数。你需要先在地图上添加一个标记。在Google上查看这个示例，它结合了巧妙的最大化功能，是一个很好的例子。

- Sean Vieira

---

我需要的是将一个普通的HTML元素添加到地图上的某些坐标上，而不是在Google Maps本机通知窗口内。谢谢！ - Cristian Toma