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

Question

我需要在谷歌地图标记的鼠标悬停上显示一些带有图像和文字的漂亮工具提示。
marker.setTitle - 仅适用于文本但不适用于html
谷歌地图api有标准解决方案吗？
你能建议lib创建工具提示并让它们看起来不错吗？

Answer 1

如果你想要一个DIY解决方案，这就是我在项目中所做的。

1. 在页面上创建隐藏的div，css位置设置为绝对值。确保您的DIV显示在地图容器的顶部（z-index）。
2. 将mouseover和mouseout事件绑定到您的标记以触发showDiv / hideDiv函数。
3. 当鼠标悬停标记时，获取鼠标x，y位置，相应地设置DIV顶部和左侧css值并设置其css显示：block;
4. 当鼠标停用时，再次隐藏DIV。

通过这种方式，您可以真正控制“infowindow”的显示方式及其包含的内容。祝你好运。

Answer 2

您可以在标记上收听mouseover事件，并触发infoWindow与该事件一起显示。

有了infowindow后，你可以用api支持的方式将图片和文字放入其中。

Answer 3

奥列格，你为什么要绑定谷歌地图api。您可以将自定义工具提示注入DOM。

在地图（或地图的特定部分）上附加mouseover，mousemove和mouseout侦听器的事件侦听器。每个侦听器还为您提供一个参数，为您提供鼠标坐标。

在工具提示的css上使用固定/绝对样式进行定位

在鼠标悬停时，将光标位置的工具提示注入DOM 在mousemove上，更新位置（左侧和顶部） 在mouseout上，从DOM中删除工具提示。

我最近为谷歌地图多边形构建了这个。您可以将我的方法重新用于地图的任何其他部分，因为Google地图上的几乎所有功能都支持事件。

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