适用于 Google Maps API v3 的 HTML5 Canvas 地标

Question

我正在寻找一种方法来生成复杂的地标(或“附加”到地标的叠加层)。

有没有办法(我还没有找到)使用 Map v3 api 来附加/覆盖地标？

或者，我是否需要在 Google API 之外进行绘制，然后让监听器在用户平移 map 时触发重绘？

Answer 1

您使用覆盖 onAdd()、draw() 和 onRemove() 的对象扩展 google.maps.OverlayView

在 onAdd 中，您可能希望在 google.maps.MapPanes 中设置对 Pane 的引用以将您的标记放入其中。然后您将必须处理平移和缩放事件。你这样做:

CustomOverlayView.prototype.initPanes = function() {
var panes = this.getPanes(); //object of type google.maps.MapPanes
this.drawPane = jQuery(panes.floatPane); //we will initialize our stuff in this div element
this.drawPane.attr("id", "map-draw-pane"); //conceivable to want to reference this, usefull for debugging
this.drawPane.css("background-color", "transparent"); //DONT COVER THE GOOGLE COPYRIGHT
};

为了使您的 Canvas 能够用于绘图，您需要一种方法将您的 google.maps.LatLng 对象转换为具有 x 和 y 变量的 Point 对象。答案在 google.maps.MapCanvasProjection 中，它有多种方法可以将编码为 google.maps.LatLng 对象的位置对象计算为有用的像素坐标(并再次返回)。

var projection = this.getProjection();//google.maps.MapCanvasProjection
var drawingLocationPoint = projection.fromLatLngToContainerPixel(markerData.location);

关于如何在谷歌地图中放置 Canvas 的一些细节在这里:http://www.samedwards.net