1

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 地图 API，我现在可以创建一个地面叠加层：

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

其中 href 是 canvas.toDataURL('image/png');

不幸的是，上述想法行不通。目前它仅适用于实际的图像 url，例如http://www.mydomain/theimage.png

寻找文档似乎可以使用画布来呈现自定义标记

如何创建类似谷歌纵横的标记？

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

4

2 回答 2

3

画布绝对可以用作图像源。toDataURL准确地为您提供它所说的内容，并且数据 URL 可以与支持它们的浏览器中的图像 URL 互换（在大多数情况下）。正如广泛指出的那样，您首先要受到相同来源的限制才能获取数据 URL，但如果图像来自同一个域（或正确启用了CORS），那应该不是问题。

无法查看您的代码以了解发生了什么，这里有一个关于 jsbin 的工作示例：

JSBin：Canvas.toDataURL 覆盖

（它在画布上绘制了许多小图像，而不是像您在帖子中提到的更大的旋转图像，但希望这能提供足够的想法）。

关键部分：

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

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

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

于 2012-05-15T07:46:10.947 回答
1

toDataURL只有在遵守同源政策的情况下，使用 Canvas生成图像才会有效。

于 2012-05-15T03:41:45.727 回答