jquery - 使用Google Maps Javascript API v3的HTML/CSS标记

Question

我们公司刚刚从Leaflet.js迁移到Google Maps API；我一直在努力寻找一种将HTML/CSS标记/框作为叠加层集成到Google Maps Javascript API v3中的简单方式。

到目前为止，我已经找到了本教程:https://developers.google.com/maps/documentation/javascript/overlays#CustomOverlays

但是，我发现它非常笨拙，并且无法将HTML/CSS代码成功注入(inject)到 map 中。

是否有人知道将HTML/CSS标记/框添加到Google Map的简便方法？

我可以通过将高/低坐标分配给分区来破坏 map ，然后使用jQuery将它们附加到Google map 上的标记中，但这是一种解决方法/修改，并且必须有一种简单的方法来整合这些坐标。

提前致谢!

Answer 1

为了节省读者的时间，我提供了演示目的网站here

对于这个问题。基本上，要添加HTML/CSS自定义标记，我建议借助一些外部库来实现OverlayView的一个子类。

首先，我需要阐明为什么您应该继承OverlayView类。

其次，我需要演示为什么外部库可能会有所帮助。

好的。首先， google.maps.Marker类扩展了 MVCObject。 OverlayView类还扩展了 MVCObject。为了使您的HTML/CSS实现的自定义标记在行为和事件通信级别(而不是可视级别)正常运行并类似于一个 google.maps.Marker，扩展 OverlayView类是一种安全的方法，因为构造 OverlayView的一个实例将以某种方式“注册”该实例本身可以进行内部 map 事件管理。我将在下面解释这种“注册”是如何发生的。

为了扩展 OverlayView，您需要重写三种方法 onRemove() onAdd()， draw()。覆盖 draw()的目的是，此方法本质上绑定(bind)到多个google map事件，例如 zoom_changed。 draw()的目的是重绘dom元素，使其出现在 map Canvas 的正确位置，并在 map Canvas 上正确调整其大小。例如，每次用户放大或缩小 map 时，一个 google.maps.Marker都会重绘自身。此外，还有许多不同的情况会触发 draw()同样，当准备好 map 图块时，会调用 onAdd()，在调用 onRemove()时会调用 setMap()。这三种方法正在监听一系列事件。在我看来，这就是“注册”的过程。这也解释了为什么扩展类 OverlayView是实现HTML/CSS定制标记的一种安全方法。因为扩展 OverlayView时，您不需要处理监听自己的 map 事件。否则，您必须这样做。

对于这个问题，即“实现一个定制制造商”，您还需要执行上述操作。

关于您的问题中给出的“自定义OverlayView示例”。我可以告诉您需要进行哪些更改以使其表现像一个标记。

在那个例子中。 css left和 top，而 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
    };

另外，您还需要通过Google Maps API提供的 addDomListener()方法处理所谓的“dom事件”。为什么它们是“所谓的”事件？

因为，为了使附加到扩展的“OverlayView”类的标记实例的HTML节点能够响应诸如“单击”，“双击”之类的用户行为(我在这里未调用浏览器事件)，开发人员应将节点附加到 Pane 中`overlayMouseTarget”。

原因是，实际上在 overlayMousetarget Pane 上方，还有其他几个非零宽度，非零高度的 map HTML节点，其中 “阴影化”了，这是我们的自定义标记节点添加到DOM树中。因此，即使您已经实现了DOM事件处理函数，我们的标记也无法直接接收诸如 onclick之类的浏览器事件。他们是“聋子”。

因此，将我们的自定义标记附加到 overlayMouseTarget Pane (节点)的目的是，Google Maps具有其自己的机制来处理收到的最多浏览器事件。 Google Map处理它们，然后通知附加到Google Map操纵 Pane 的那些节点(这五个节点: floatPane mapPane markerLayer overlayLayer overlayMouseTarget)

现在您可以理解为什么在调用“addDomListener()”时调用“所谓的”事件了。由于原始的“点击”浏览器事件从未达到我们的劣标，因此，它通过监听由最原始的“点击”浏览器事件触发的一个内部google map事件来响应“点击” Action 。

现在，让我们将重点放在第二点:
“我需要证明为什么外部库可能会有所帮助”
您必须处理不同的Google Map dom监听器才能完成最初可以用几行CSS代码完成的任务。

例如，要实现伪类 hover，您需要实现 mouseover mouseout的处理程序等，并进行一些CSS类的添加和删除。

使用诸如mapcover.js之类的外部库，您只需 set("mouseover": function cb() { /*your implementations here*/})即可。

已经写了这么多，我将在这里展示一个演示:
http://easysublease.org/mapcoverjs/

可以在 here中找到如何创建HTML标记的详细实现