使用Google Maps Javascript API v3的HTML / CSS标记 [英] HTML/CSS Markers using Google Maps Javascript API v3

问题描述

我们的公司刚刚从Leaflet.js移至Google Maps API;我试图寻找一种简单的方法，将HTML / CSS标记/框作为叠加层整合到Google Maps JavaScript API v3中。

到目前为止，我找到了本教程： https：//开发人员。 google.com/maps/documentation/javascript/overlays#CustomOverlays

然而，我发现它非常笨重，我无法注入HTML / CSS代码已成功导入地图中。

有人知道在Google Map中添加HTML / CSS标记/ p>

我可以继续前进并通过将顶部/左侧坐标分配给各个分部来破解地图，然后使用jQuery将它们附加到地图上作为Google地图上的标记，但这是一种解决方法/黑客，并且必须有一个简单的方法来整合这些。

在此先感谢！

解决方案

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

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

• 首先我需要说明为什么你应该继承 OverlayView class。
>

• 其次我需要说明为什么外部库可能会有帮助。

好的。首先， 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（）当map的贴图准备就绪时，当调用 setMap（）时，会调用 onRemove（）。这三种方法正在监听一系列事件。这就是我所说的注册。这也解释了为什么扩展类 OverlayView 是实现HTML / CSS自定义标记的一种安全方法。因为当你扩展 OverlayView 时，你不需要处理收听自己的地图事件。否则，你必须。



针对这个问题，为了实现一个定制的制造商，你还需要做上述的事情。

在您的问题中给出的自定义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_）; //我需要有这个jQuery方法
} 
 
 //通常，不应该在点击时产生dom节点的左上角，而是使用left和top偏移量
}; 
  

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

因为使附加到扩展OverlayView类标记实例的HTML节点能够响应用户行为（我没有在这里调用浏览器事件），比如点击双击，开发者应该将节点附加到面板overlayMouseTarget。

原因是，在 overlayMousetarget 窗格上方，还有其他几个非零宽度的非零高度图HTML节点，它们被添加到shadowed所以我们的标记不能直接接收浏览器事件，比如 onclick ，即使你已经为它实现了DOM事件处理函数，它们是失聪的。 >

因此，将我们定制的标记添加到 overlayMouseTarget 窗格（节点）的目的在于，Google地图具有其自身的机制处理接收到的最外的浏览器事件，谷歌地图处理它们，然后通知那些节点nded to google map mangaged pane（那五个节点： floatPane mapPane markerLayer overlayLayer overlayMouseTarget ）

现在您可以理解为什么当你调用addDomListener（）时，我称之为所谓的事件。由于原始的点击浏览器事件从来没有达到我们可怜的标记，相反，它通过监听一个由最原始的点击浏览器事件触发的内部谷歌地图事件来响应点击动作。

现在，让我们关注第二点：$ b​​ $ b我需要演示为什么外部库可能会有所帮助
您必须处理不同的Google地图dom侦听器才能完成任务你可以使用几行CSS代码。例如，要实现伪类 hover ，需要实现 mouseover处理程序 mouseout 等等，做一些CSS类的添加和删除。

$ b $ <使用外部库如mapcover.js，你可以在中设置（mouseover：function cb（）{/ *你的实现在这里* / }）。

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

有关如何创建HTML标记的详细实现可以参见 here

Our company just moved from Leaflet.js to the Google Maps API; I've search high and low trying to find a simple way of integrating HTML/CSS Markers/Boxes as overlays into the Google Maps Javascript API v3.

So far, i've found this tutorial: https://developers.google.com/maps/documentation/javascript/overlays#CustomOverlays

Nevertheless, I find it extremely clunky and I haven't been able to inject HTML/CSS code successfully into the map.

Does anybody know of an easier way of adding HTML/CSS Markers/Boxes unto Google Map?

I could go ahead and hack the map by assigning top/left coordinates to divisions and then attach them to the map with jQuery to markers on google map, but this is a workaround/hack and there must be a simple way of integrating these.

Thanks in advance!

解决方案

To save readers' time, I provide demo-purpose website here

For this question. Basically, to add HTML/CSS customized markers, I suggest implementing one subclass of OverlayView with the help of some external library.

• First I need to clarify why you should inherit OverlayView class.
• Second I need to demonstrate why an external library might help.

Okay. First, The google.maps.Marker class extends MVCObject. The OverlayView class also extends MVCObject. To make your HTML/CSS implemented customized marker behave normally and resemble one google.maps.Markerat behavioral and event-communication level (but not visual level), extending OverlayView class is one safe way, since constructing one instance of OverlayView will somehow "register" the instance itself to the internal map events management. I will explain how this "registration" happened below.

In order to extend OverlayView, you need to override three methods, onRemove() onAdd(), draw(). The purpose of overriding draw() is that, this method is intrinsically bound to several google map events, such as zoom_changed. The purpose of draw() is to redraw the dom element, make it appear at right position of map canvas, and have it correctly sized on map canvas. For example, one google.maps.Marker redraws itself every time when user zoom in or zoom out the map. Additionally, there are many different situations that will trigger draw() Similarly, onAdd() is invoked when tiles of map are ready, onRemove() is invoked when setMap() is invoked. There is a series of events being listened by these three methods. This is how "registration" happens in my point. This also explains why extending class OverlayView is one safe way to implement your HTML/CSS customized marker. Because you do not need to deal with map events listening yourself when you extending OverlayView. Otherwise, you have to.

Specifically to this question, "to implement one custom maker", you need to do things described above also.

On the "custom OverlayView example" given in your question. I can tell you what you need to change to make it behave like one marker.

In that example. the css left and top, and width is determined by pre-defined google.maps.Bounds, you should change this. You need code like following:

    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
    };

Also you need to handle so called "dom events" by addDomListener() method provided by google maps API. Why they are "so-called" events?

Because, to make the HTML nodes attached to marker instances of the extended "OverlayView" class be able to respond to user behaviors (I am not calling browser events here) like "clicking" "double clicking", developer should append the nodes to pane `overlayMouseTarget".

The reason is that, actually above overlayMousetarget pane, there are several other non-zero width none-zero height map HTML nodes, which "shadowed" our custom marker node added to the DOM tree. So our marker CANNOT directly receive browser events like onclick, even if you have implemented the DOM event handler functions for it. They are "deaf".

So the purpose of appending our customized Marker to overlayMouseTarget pane(node) is that, Google Maps has its own mechanism for how to process received outmost browser events. Google map process them, and then notify those nodes appended to google map mangaged panes(those five nodes: floatPane mapPane markerLayer overlayLayer overlayMouseTarget)

Now you can understand why I am calling the "so-called" events when you invoking "addDomListener()". Because the original "click" browser event never reached our poor markers, instead, it responds to "click" action by listening to one internal google map event which is trigger by outmost original "click" browser event.

Now, lets focus one the second point: "I need to demonstrate why an external library might help" You have to handle different google map dom listeners to complete tasks originally you can do with several lines of CSS code.

For example, to realize pseudo class hover, you need to implement handler of mouseover mouseout and so on, do some CSS classes adding and removal.

With external library such mapcover.js, you can just set("mouseover": function cb() { /*your implementations here*/}).

Have written so much, I will just show one demo here: http://easysublease.org/mapcoverjs/

The detailed implementations how you can create your HTML markers can be found here

这篇关于使用Google Maps Javascript API v3的HTML / CSS标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！