6

我们公司刚刚从 Leaflet.js 迁移到 Google Maps API；我到处搜索，试图找到一种将 HTML/CSS 标记/框作为叠加层集成到 Google Maps Javascript API v3 中的简单方法。

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

尽管如此，我发现它非常笨重，而且我无法成功地将 HTML/CSS 代码注入到地图中。

有人知道将 HTML/CSS 标记/框添加到 Google 地图的更简单方法吗？

我可以通过将顶部/左侧坐标分配给分区来继续破解地图，然后使用 jQuery 将它们附加到地图上的谷歌地图上的标记，但这是一种解决方法/破解，必须有一种简单的方法来整合这些。

提前致谢！

4

2 回答 2

3

为了节省读者的时间，我在这里提供了演示网站

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

  • 首先我需要澄清为什么你应该继承OverlayView类。
  • 其次，我需要证明为什么外部库可能会有所帮助。

好的。首先，google.maps.Marker类扩展MVCObject。该类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和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
    };

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

因为，为了使附加到扩展“OverlayView”类的标记实例的 HTML 节点能够响应用户行为（我在这里不调用浏览器事件），例如“单击”“双击”，开发人员应该将节点附加到窗格`overlayMouseTarget"。

原因是，实际上在overlayMousetarget窗格上方，还有其他几个非零宽度非零高度映射 HTML 节点，它们“遮蔽”了我们添加到 DOM 树的自定义标记节点。所以我们的标记不能直接接收类似的浏览器事件onclick，即使你已经为它实现了 DOM 事件处理函数。他们是“聋子”。

因此，将我们自定义的标记附加到overlayMouseTarget窗格（节点）的目的是，谷歌地图有自己的机制来处理接收到的最外面的浏览器事件。谷歌地图处理它们，然后通知附加到谷歌地图托管窗格的那些节点（这五个节点floatPane mapPane markerLayer overlayLayer overlayMouseTarget：）

现在您可以理解为什么我在调用“addDomListener()”时调用“所谓的”事件了。因为原始的“点击”浏览器事件从未到达我们糟糕的标记，相反，它通过侦听由最外面的原始“点击”​​浏览器事件触发的一个内部谷歌地图事件来响应“点击”动作。

现在，让我们关注第二点：“我需要证明为什么外部库可能会有所帮助”您必须处理不同的 google map dom 侦听器才能完成最初可以使用几行 CSS 代码完成的任务。

比如要实现伪类hover，就需要实现handler ofmouseover mouseout等，做一些CSS类的增删。

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

写了这么多，这里只展示一个demo：http: //easysublease.org/mapcoverjs/

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

于 2015-07-21T16:47:52.857 回答
1

您可能需要检查google.maps.InfoWindow（https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows）和google.maps.Marker（https://developers.google.com/maps/documentation/javascript/reference#Marker）谷歌地图。您在页面上应用的任何 CSS 也将应用到 InfoWindow。

于 2012-07-26T22:06:38.980 回答