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

Question

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

是否有一种方法(我没有找到它)与Map v3 api在地标上附加/覆盖a？

或者,我是否需要在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 转换为当前缩放级别和投影类型的像素。