如何为谷歌地图标记添加自定义工具提示？ [英] How to add custom tooltip for google map marker ?

问题描述

我需要在Google地图标记的鼠标悬停上显示一些漂亮的提示图片和文字。

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

谷歌地图api是否有标准解决方案？

您能否建议lib创建工具提示并让它们看起来不错？

I need to show some nice tooltip with image and text on mouse hover of google maps marker.
marker.setTitle - works only with text but not with html
Does google maps api have standard solution ?
Can you please suggest lib to create tooltips and make them look nice ?

推荐答案

Here is what I did on a project if you want a DIY solution.

1. 在页面上创建一个隐藏div，css位置设置为绝对。确保您的DIV出现在地图容器（z-index）的顶部。


2. 将mouseover和mouseout事件绑定到您的标记以触发showDiv / hideDiv函数。 $ b
3. 鼠标悬停标记时，获取鼠标x，y位置，相应地设置DIV顶部和左侧css值，并将其CSS设置为显示：block; 当鼠标出局，再次隐藏DIV。

通过这种方式，您可以真正控制infowindow的显示方式和内容。祝你好运。

This way you can really control how your "infowindow" appears and what it will contain. Good luck.

这篇关于如何为谷歌地图标记添加自定义工具提示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！