使用Google Maps Javascript API v3的HTML / CSS标记
我们公司刚从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 Map的更简单方法？
我可以继续通过为分区指定顶部/左侧坐标然后将它们附加到地图上，使用jQuery到谷歌地图上的标记来破解地图，但这是一个解决方法/黑客，必须有一种简单的方法来集成这些。
提前致谢！
为了节省读者的时间，我在这里提供了演示目的网站
对于这个问题。 基本上，为了添加HTML / CSS自定义标记，我建议在一些外部库的帮助下实现OverlayView一个子类。
- 首先，我需要澄清为什么要inheritance
OverlayView类。 - 其次，我需要说明为什么外部库可能会有所帮助。
好的。 首先， google.maps.Marker类扩展了MVCObject 。 OverlayView类还扩展了MVCObject 。 为了使您的HTML / CSS实现自定义标记行为正常并且在行为和事件通信级别（但不是可视级别）类似于一个google.maps.Marker ，扩展OverlayView类是一种安全的方式，因为构建一个OverlayView实例将以某种方式“将“实例本身”注册到内部地图事件管理。 我将在下面解释这种“注册”是如何发生的。
为了扩展OverlayView ，你需要覆盖三个方法， onRemove() onAdd() ， draw() 。 覆盖draw()的目的是，此方法本质上绑定到几个谷歌地图事件，例如zoom_changed 。 draw()的目的是重绘dom元素，使其出现在地图canvas的正确位置，并在地图canvas上正确resize。 例如，每次用户放大或缩小地图时，都会重新绘制一个google.maps.Marker 。 此外，有许多不同的情况会触发draw()同样，当map的tile准备就绪时调用onAdd() ，调用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_); // 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节点能够响应用户行为（我不在这里调用浏览器事件），例如“点击”“双击”，开发人员应该将节点附加到窗格`overlayMouseTarget”。
原因是，实际上在overlayMousetarget窗格之上，还有其他几个非零宽度非零高度映射HTML节点，它们“遮蔽”添加到DOM树的自定义标记节点。 所以我们的标记不能直接接收像onclick这样的浏览器事件，即使你已经为它实现了DOM事件处理函数。 他们是“聋子”。
因此，将我们的自定义标记附加到overlayMouseTarget窗格（节点）的目的是，Google Maps有自己的机制来处理接收到的最外面的浏览器事件。 谷歌地图处理它们，然后通知那些附加到谷歌地图管理窗格的节点（那五个节点： floatPane mapPane markerLayer overlayLayer overlayMouseTarget ）
现在你可以理解为什么我在调用“addDomListener（）”时调用“所谓的”事件。 因为原始的“点击”浏览器事件从未到达我们糟糕的标记，相反，它通过听一个由最外面的原始“点击”浏览器事件触发的内部谷歌地图事件来响应“点击”动作。
现在，让我们重点关注第二点：“我需要说明为什么外部库可能会有所帮助”你必须处理不同的谷歌地图dom监听器来完成最初你可以用几行CSS代码完成的任务。
例如，要实现伪类hover ，你需要实现mouseover mouseout处理程序等，做一些CSS类的添加和删除。
使用外部库如mapcover.js，你可以set("mouseover": function cb() { /*your implementations here*/}) 。
写了这么多，我将在这里展示一个演示： http ： //easysublease.org/mapcoverjs/
您可以在此处找到有关如何创建HTML标记的详细实现
您可能需要查看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。