3

そのため、Google マップ (v3 API) を画像として保存する最も効率的な方法を見つけようとしています。最初に、snapshopcontrol.js を使用してみましたが、これはうまく機能しますが、150 を超えるマーカーがあるマップがいくつかあるため、URL の制限を超えています。

次に、マップの画像を作成する html2canvas で次のコードを試しましたが、html2canvas がそれをレンダリングするとすぐに、マップの位置がシフトし、マーカーが lat 0 lng 0 のように見えるものの上に移動します。 

var element = $('#mapDiv');
html2canvas(element, {
        useCORS: true,
        onrendered: function(canvas) {
            var dataUrl= canvas.toDataURL("image/png");
            document.write('<img src="'+dataUrl+'" />');
        }
    });

地図がずれず、正しい位置にとどまっていれば完璧です。なぜこれが起こっているのか、誰かが光を当てることができますか?

html2canvas適用前のスクリーンショット html2canvas 適用前

html2canvas 適用後のスクリーンショット html2canvas 適用後

UPDATE 私のJSコンソールでは、それは言う

「XSS オーディターは、"http://...." のスクリプトの実行を拒否しました。そのソース コードが要求内に見つかったためです。サーバーが 'X-XSS-Protection' も 'Content. -Security-Policy のヘッダーです。」

「クロスオリジン リソース共有ポリシーによって、クロスオリジン イメージの読み込みが拒否されました。」"data:image/png;base64,iV......"

4

3 に答える 3

2

私は同じ問題に遭遇しました。html2canvas は親から子への変換スタイルを追加していないようです。私の場合、問題は次のとおりでした。

<div class="mapContainerClass" style="transform: translate3d(9px,-5px,0px);" >
    <div class="markerClass" style="transform: translate3d(89px,-56px,0px);" ></div>
</div>

私がしたことは、累積翻訳を計算し、それを各マーカーに追加することだけでした。ただし、元に戻す必要があります

Cross Origin の問題について: マップ サーバーがクロス イメージの読み込みを許可していないようです。画像をダウンロードする必要があり、html2canvas オプションで useCORS: true を設定する必要があります。

于 2014-11-04T15:57:51.830 に答える
1

たぶん、de GMPs のバージョンを変更できます。私の場合、それは魅力のように機能します。

私は 3.14 バージョンで試していましたが、結果はありませんでしたが、代わりに 3.10 だけを src URL に入れて、うまくいきました!.

また、Html2canvas と canvas2image を組み合わせて、スクリーンショットのサイズを改善しています。

于 2014-07-04T14:36:34.020 に答える