Question

Google地图API都不支持旋转地图叠加层的功能。对于我正在编写的应用程序，我需要将地图叠加层旋转到任意角度。

所以我认为我可以将我的图像资源渲染到如下的画布：

    overlay = new Image();
overlay.onload = function(){
    if (context != false){
        context.translate(canvas.width / 2, canvas.height / 2);
        context.rotate(Math.PI / 4);
        context.drawImage(overlay,0,0,67,360);

    }
};
overlay.src = 'myimage.png';

使用Google maps API，我现在可以创建地面叠加层：

var thing = new google.maps.GroundOverlay(href, bounds);

其中href是canvas.toDataURL（'image / png'）;

不幸的是，上述想法无效。目前它仅适用于实际图片网址，例如http://www.mydomain/theimage.png

寻找文档，似乎可以使用画布来渲染自定义标记

How to create Google Latitude like markers?

但我需要这个才能用于地面覆盖。

Answer 1

画布绝对可以作为图像源使用。 toDataURL可以准确地说明它所说的内容，并且数据网址可以与支持它们的浏览器中的图像网址互换（在大多数情况下）。正如broady所指出的那样，您首先需要获得相同的原始限制来获取数据URL，但如果图像来自同一个域（或者CORS已正确启用），那么这应该不是问题。

如果没有能够查看代码以查看正在发生的事情，这里是jsbin的一个工作示例：

JSBin: Canvas.toDataURL Overlay

（它会将大量小图像绘制到画布上，而不是像您在帖子中提到的那样更大的旋转图像，但希望这给出了足够的想法）。

关键部分：

var canvasImage = canvas.toDataURL('image/png');

var canvasOverlay = new google.maps.GroundOverlay(
    canvasImage,
    overlayLatLngBounds);
canvasOverlay.setMap(map);

没有理由不在其他地方工作。确保仔细检查控制台是否存在任何可能的错误。

Answer 2

使用Canvas的toDataURL生成图片只有在符合same-origin policy的情况下才有效。

canvas.toDataURL用于Google地图地面叠加层

2 个答案: