使用HTML替代Google地图标记图像

Question

能否在Google地图标记中显示HTML而不是图片？

如何最好地实现这个功能？ 我想象一个看不见的标记和一个自定义信息窗口可能会在实现这个功能中发挥作用。

- coiso

Answer 1

你可以使用OverlayView类来创建自定义覆盖层，其中包含HTML元素 - https://developers.google.com/maps/documentation/javascript/overlays#CustomOverlays 简单示例 - http://jsfiddle.net/BCr2B/

- dimusic

---

CSS样式出了问题:s 我正在尝试创建这个标记: http://jsfiddle.net/BW3ca/9/ - coiso

请在Fiddle上发布如何将其添加到地图上以及问题的具体内容。 - dimusic

哦，我明白了，那是因为Fiddle默认使用规范化的CSS。如果您从左侧选项中取消勾选它，它会变得混乱，所以现在问题只存在于您的CSS中 :) - dimusic

覆盖层可以拖动吗？ - coiso

可以的，例如使用jQueryUI使其可拖动 - http://jsfiddle.net/BCr2B/7/。基本上，您需要阻止该覆盖层上的地图鼠标事件传播，以便您可以附加自己的事件。 - dimusic

Answer 2

你可能想要查看这个：https://github.com/jonyt/gmaps-div-overlay

DivOverlay是一个非常简单的HTML容器，可以在Google地图上的任何位置显示。它所做的就是从地图边界计算出边距，使其整个内容都在地图内。请查看演示。构造函数需要3个参数：HTML容器、要附加到的地图和覆盖层的位置。DivOverlay只有两个函数：show()和hide()。应该很容易理解。

- ksiomelo