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

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

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

有没有办法(我还没有找到)使用 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/

相关文章:

javascript - VS 代码在使用 Angular async 和 elvis 运算符与 observable 时出现 "identifier not defined"错误

javascript - jQuery 中的宽度切换动画在 FireFox 中不起作用?

javascript - jQuery 网站标题问题

javascript - 如何将 google maps 异步回调与 knockout 和 webpack 一起使用?

html - 如何在不缩放的情况下使用 HTML5 canvas 翻转图像

javascript - ChartJS 动态折线图在悬停时会重影回旧数据

javascript - CSS transform-origin 不适用于 safari 中的 svg

google-maps - 方向api : check if a place falls in the route path between 2 places

javascript - 谷歌地图标记与变量中的谷歌分析 onclick 事件

javascript - onclick 在 Canvas 中创建随机矩形,不会与现有矩形发生冲突