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'）;です。

残念ながら、上記のアイデアは機能していません。現時点では、http：//www.mydomain/theimage.pngなどの実際の画像URLでのみ機能します。

ドキュメントを探すと、キャンバスを使用してカスタムマーカーをレンダリングできるようです

マーカーのようなGoogleLatitudeを作成するにはどうすればよいですか？

しかし、私はこれが地面のオーバーレイで機能するために必要です。

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に準拠している場合にのみ機能します。

于 2012-05-15T03:41:45.727 に答える