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

Question

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

Answer 1

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

在您的页面上创建一个隐藏的 div，并将 css 位置设置为绝对。确保您的 DIV 出现在 map 容器(z-index)的顶部。

将 mouseover 和 mouseout 事件绑定(bind)到您的标记以触发 showDiv/hideDiv 函数。

当鼠标悬停标记时，获取鼠标 x,y 位置，相应地设置 DIV 顶部和左侧 css 值并将其 css 设置为 display:block;

当鼠标离开时，再次隐藏 DIV。

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