html2canvas谷歌地圖 - 地圖不斷移動的位置

所以我一直在試圖找到最有效的方法來保存谷歌地圖（V3 API）作爲一個圖像。起初，我嘗試使用snapshopcontrol.js，這很好，但我有一些地圖上有超過150個標記，所以超出了URL限制。html2canvas谷歌地圖 - 地圖不斷移動的位置

接下來，我嘗試了下面的代碼與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+'" />'); 
     } 
    });

如果地圖不會移位並保持在正確的位置，那將是完美的。任何人都可以解釋爲什麼會發生這種情況？ BEFORE html2canvas的

截屏被應用於 Before html2canvas is applied

後html2canvas的屏幕快照應用 After html2canvas is applied

UPDATE 在我的JS控制檯，它說

「的XSS審計拒絕在「http：// ....」中執行一個腳本，因爲它的源代碼在請求中被發現，審計器被啓用，因爲服務器既沒有發送'X-XSS - 保護「或」內容安全策略「標題。」

「跨源資源共享策略拒絕跨源圖像加載」。「data：image/png; base64，iV ............」

來源

2014-01-15 Phil

您是否找到任何解決方案？我遇到了同樣的問題。 –

@ABHILASHSB不，我最終沒有使用html2canvas選項，而是使用Google Static Maps v2.0 API創建靜態地圖圖像。 – Phil

我有同樣的問題...我找不到任何其他地方討論這個問題，顯然還沒有答案。 – bjo

也許你可以更改de GMps版本。它對我來說就像一個魅力。

我用3.14版本進行了測試，結果沒有結果，但是我只是在src URL中輸入了3.10，它剛剛工作！

此外，我還將Html2canvas與canvas2image結合起來，以改善我的屏幕截圖的大小。

來源

2014-07-04 14:36:34 user3381068

我遇到了同樣的問題。看起來html2canvas不會將變換樣式從父項添加到子項。在我的情況的問題是：

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

我所做的是計算累計翻譯和添加它爲每個標記。但你應該恢復它以及

關於你的十字起源問題：它似乎地圖服務器不允許跨圖像加載。它應該下載圖像，並且您必須在html2canvas選項中設置useCORS：true

來源

2014-11-04 15:57:51 Voila

html2canvas谷歌地圖 - 地圖不斷移動的位置

回答

相關問題