我正在寻找一种方法来生成复杂的地标(或“附加”到地标的叠加层)。
有没有办法(我还没有找到)使用 Map v3 api 来附加/覆盖地标?
或者,我是否需要在 Google API 之外进行绘制,然后让监听器在用户平移 map 时触发重绘?
最佳答案
您使用覆盖 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
关于适用于 Google Maps API v3 的 HTML5 Canvas 地标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5706129/