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

Question

我需要显示一些很好的工具提示与图像和鼠标悬停的谷歌地图标记文字。

marker.setTitle -仅适用于文本，而不适用于html

谷歌地图api有没有标准的解决方案？

你能推荐lib来创建工具提示并让它们看起来很漂亮吗？

Answer 1

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

1. 在页面上创建一个隐藏的div，并将css位置设置为绝对。确保您的DIV显示在地图容器顶部，并将鼠标悬停和鼠标移出事件发送到您的标记以触发showDiv / hideDiv功能。
2. 当鼠标悬停在标记上时，获取鼠标的x，y位置，相应地设置DIV顶部和左侧的CSS值，并将其css设置为display:block;
3. When鼠标移出，再次隐藏该DIV。

这样你就可以真正控制你的"infowindow“的显示方式和它包含的内容。祝好运。

Answer 2

您可以侦听标记上的mouseover事件，并触发infoWindow与该事件一起出现。

一旦你有了infowindow，你就可以用api很好的支持的方式把图片和文本放进去。

Answer 3

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

为map (或map的特定部分)上的mouseover、mousemove和mouseout侦听器附加事件侦听器。这些侦听器中的每个侦听器还会给您一个参数，为您提供鼠标坐标。

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

鼠标悬停时，将光标位置处的工具提示注入鼠标移动时的DOM中，更新鼠标输出时的位置(左和上)，从DOM中删除工具提示。

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

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