Question

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

有没有办法（我还没找到）用Map v3 api在地标上附加/叠加？

或者，我是否需要在Google api之外绘制，然后让用户在播放地图时触发重绘的侦听器？

Answer 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);

有关如何在Google地图中放置画布的一些详细信息：http://www.samedwards.net

Answer 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画布（或任何真实的画布）并绘制您需要的任何内容。您可以访问基础地图投影，这样您就可以将LatLng可靠地转换为当前缩放级别和投影类型的像素。

Answer 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

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

3 个答案: