为了节省读者的时间，我提供演示目的网站here
对于这个问题。基本上，要添加 HTML/CSS 自定义标记，我建议实现一个子类OverlayView在一些外部库的帮助下。
- 首先我需要澄清为什么你应该继承
OverlayView class.
- 其次，我需要演示为什么外部库可能会有所帮助。
好的。首先，google.maps.Marker类扩展MVCObject. The OverlayView类也延伸MVCObject。使您的 HTML/CSS 实现的自定义标记表现正常并类似于标记google.maps.Marker在行为和事件沟通层面（但不是视觉层面），延伸OverlayView类是一种安全的方法，因为构造一个实例OverlayView将以某种方式将实例本身“注册”到内部地图事件管理中。下面我将解释这个“注册”是如何发生的。
为了延长OverlayView，您需要重写三个方法，onRemove() onAdd(), draw()。覆盖的目的draw()是这样的，这个方法本质上绑定到几个谷歌地图事件，例如zoom_changed。的目的draw()是重绘 dom 元素，使其出现在地图画布的正确位置，并使其在地图画布上的大小正确。例如，一个google.maps.Marker每次用户放大或缩小地图时都会重新绘制自己。此外，还有很多不同的情况会触发draw()相似地，onAdd()当地图图块准备好时调用，onRemove()被调用时setMap()被调用。这三个方法正在监听一系列事件。在我看来，这就是“注册”的发生方式。这也解释了为什么要扩展类OverlayView是实现 HTML/CSS 自定义标记的一种安全方法。因为你在扩展时不需要处理自己监听的地图事件OverlayView。否则，你必须这样做。
具体到这个问题，“实现一个定制制造商”，您还需要执行上述操作。
关于您问题中给出的“自定义 OverlayView 示例”。我可以告诉您需要进行哪些更改才能使其像一个标记一样工作。
在那个例子中。 CSSleft and top, and width由预定义确定google.maps.Bounds，你应该改变这个。您需要如下代码：
CustomMarker.prototype.draw = function(){
var overlayProjection = this.getProjection();
// console.log("draw" + this.latLng);
var anchor = overlayProjection.fromLatLngToDivPixel(this.latLng);
if (this.dom_) {
this.dom_.style.top = (Math.round(anchor.y- this.height_)).toString()+'px';
this.dom_.style.left = Math.round( anchor.x - this.width_ / 2).toString() + 'px';
$(this.dom_).outerWidth(this.width_); // I need to have this jQuery method
}
// generally, the dom node left-top corner should not be generated at clicking poistion, but with offsets of both left and top
};
您还需要通过以下方式处理所谓的“dom 事件”addDomListener()谷歌地图API提供的方法。为什么它们是“所谓的”事件？
因为，为了使附加到扩展“OverlayView”类的标记实例的 HTML 节点能够响应用户行为（我在这里不调用浏览器事件），例如“单击”“双击”，开发人员应该将节点附加到窗格`overlayMouseTarget”。
原因是，实际上上面overlayMousetarget窗格中，还有其他几个非零宽度非零高度的 HTML 地图节点，其中“阴影”我们的自定义标记节点已添加到 DOM 树中。所以我们的标记不能直接接收浏览器事件，例如onclick，即使您已经为其实现了 DOM 事件处理函数。他们是“聋子”。
所以附加我们定制的Marker的目的是overlayMouseTargetpane(node) 的特点是，Google 地图有自己的机制来处理接收到的最外层浏览器事件。谷歌地图处理它们，然后通知附加到谷歌地图管理窗格的那些节点（这五个节点：floatPane mapPane markerLayer overlayLayer overlayMouseTarget)
现在您可以理解为什么我在调用“addDomListener()”时调用“所谓的”事件了。因为原始的“点击”浏览器事件从未到达我们可怜的标记，相反，它通过侦听一个内部谷歌地图事件来响应“点击”操作，该事件是由最外层的原始“点击”浏览器事件触发的。
现在，让我们关注第二点：
“我需要证明为什么外部库可能会有所帮助”
您必须处理不同的 google 地图 dom 侦听器才能完成原本可以使用几行 CSS 代码完成的任务。
例如，实现伪类hover，你需要实现处理程序mouseover mouseout等等，做一些CSS类的添加和删除。
使用诸如mapcover.js之类的外部库，您可以set("mouseover": function cb() { /*your implementations here*/}).
写了这么多，这里只展示一个demo：http://easysublease.org/mapcoverjs/
您可以找到如何创建 HTML 标记的详细实现here
