如何为谷歌地图标记添加自定义工具提示？

Question

我需要在Google Maps标记的鼠标悬停时显示带有图像和文本的漂亮工具提示。
marker.setTitle-仅适用于文本，而不适用于HTML。
Google Maps API是否有标准解决方案？
您能否建议一个库来创建工具提示并使它们看起来漂亮？

- Oleg Dats

Answer 1

这是我在一个项目中的 DIY 解决方案：

1. 使用 CSS 将一个隐藏的 DIV 定位到页面上，确定 DIV 出现在地图容器之上（z-index）。
2. 为标记绑定 mouseover 和 mouseout 事件来触发 showDiv / hideDiv 函数。
3. 当鼠标悬停在标记上时，获取鼠标的 x、y 坐标位置，根据此设置 DIV 的 top 和 left css 值，并将其 css 设置为 display:block；
4. 当鼠标移出时，再次隐藏该 DIV。

这样你就可以真正控制你的“信息窗口”出现的方式和其中包含的内容。祝好运。

- MrUpsidown

---

如果您使用google.maps.event.addListener处理标记的mouseover事件，那么所有的事件对象都只包含纬度和经度信息，因此您无法获取鼠标的x、y位置。这使得这种方法无法实现。 - Justin

我并没有说你要从标记监听器中获取鼠标位置。像在任何其他脚本中一样，从DOM中获取它。 - MrUpsidown

Answer 2

您可以监听标记上的mouseover事件，并触发一个infoWindow，以使它在该事件出现时显示。

一旦有了信息窗口，您可以通过api以良好支持的方式在其中放置图片和文本。

- Oliver

---

是的，但 infoWindow 很难自定义。它有预定义的设计。对我来说，InfoBox 更好。 - Oleg Dats

Answer 3

Oleg，你为什么要绑定Google Maps API呢？你可以将自定义工具提示注入到DOM中。

在地图上（或地图的特定部分）附加mouseover、mousemove和mouseout监听器。每个监听器还会给出一个参数，提供鼠标坐标。

使用固定/绝对样式来定位工具提示的CSS。

在mouseover时，在光标位置将工具提示注入到DOM中；在mousemove时，更新位置（左和上）；在mouseout时，从DOM中删除工具提示。

我最近为Google Maps多边形构建了这个功能。你可以重新利用我的方法，为地图的任何其他部分进行改造，因为几乎每个Google地图的功能都支持事件。

链接：https://medium.com/@asimmittal/custom-tooltips-for-google-maps-in-pure-javascript-a8004b8e9458

- Asim Mittal