谷歌地图 API v3 的 HTML5 画布地标答案

【问题标题】：HTML5 Canvas Placemark for Google Maps API v3谷歌地图 API v3 的 HTML5 画布地标
【发布时间】：2011-08-08 01:07:46
【问题描述】：

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

有没有办法（我还没有找到）使用 Map v3 api 来附加/覆盖一个地标？

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

【问题讨论】：

标签： html google-maps canvas google-maps-api-3

【解决方案1】：

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

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

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

为了让您的画布对绘图有用，您需要一种方法将您的 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);

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

【讨论】：

错过了插入画布的步骤：this.drawPane.html("");跨度>

【解决方案2】：

这很容易完成，所以很抱歉没有早点出现答案。希望这对您仍然有用。

见： http://code.google.com/apis/maps/documentation/javascript/overlays.html#CustomOverlays

这里有一个例子： http://code.google.com/apis/maps/documentation/javascript/examples/overlay-simple.html

您需要实现一个扩展 OverlayView 的 Javascript 类。具体来说，您将编写一个 draw() 方法，只要地图的状态发生变化（例如，它已被拖动或缩放），Maps API 就会调用该方法。

在该方法中，您可以创建 HTML5 画布（或其他任何东西）并绘制您需要的任何内容。您可以访问底层地图投影，从而可靠地将 LatLngs 转换为当前缩放级别和投影类型的像素。

【讨论】：

【解决方案3】：

我建议查看这个用于创建画布覆盖的半官方扩展库：

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/canvaslayer/

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/canvaslayer/examples/hello2d.html

以及这个示例，它使用 raphael 代替，但展示了如何将其他对象与标记相关联：

http://gmaps-samples-v3.googlecode.com/svn/trunk/cloud/cloud.html

【讨论】：

你的链接失效了