canvas.toDataURL爲谷歌地圖地面覆蓋

無的谷歌地圖API的支持，以旋轉地圖覆蓋的能力。對於我正在編寫的應用程序，我需要將地圖疊加旋轉到任意角度。canvas.toDataURL爲谷歌地圖地面覆蓋

所以我想我可能使我的形象資源，像一張畫布：

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';

使用谷歌地圖API現在我可以創建一個地面疊加：

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

其中href是畫布。 toDataURL（ '圖像/ PNG'）;

不幸的是，上面的想法是行不通的。目前，它只能作爲http://www.mydomain/theimage.png

實際的圖像URL這樣的作品尋找文檔，它似乎可以用畫布渲染自定義標記

How to create Google Latitude like markers?

，但我想這能對地面覆蓋工作。

來源

2012-05-14 Paul van Dinther

使用Canvas的toDataURL生成圖像，如果你符合same-origin policy纔會工作。

來源

2012-05-15 03:41:45

相同的來源是什麼？該圖像來自與html頁面相同的域。在調試器中可以看到它確實產生了所需的dataURL。 –

畫布絕對可以作爲圖象源工作。 toDataURL爲您提供了完全相同的內容，並且數據網址可與支持它們的瀏覽器中的圖像網址互換（大多數情況下）。作爲布羅迪指出的，你是受同樣的原產地限制，獲得第一名的數據URL，但如果圖像是來自同一個域（或具有CORS正確啓用），這不應該是一個問題。

短的能看看你的代碼，看看發生了什麼事情，這裏的一對jsbin工作示例：

JSBin: Canvas.toDataURL Overlay

（它吸引許多小圖像的畫布，而不是一個更大的，像你在文章中提到的旋轉圖像，但希望這給了足夠的想法）。

關鍵部分：

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

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

沒有理由不會在其他地方工作。確保仔細檢查控制檯是否有任何可能的錯誤。

來源

2012-05-15 07:46:10

這是一個很棒的例子。我一定做錯了什麼，但現在我可以把它放下。我還不能投票給你，但非常感謝。 –

canvas.toDataURL爲谷歌地圖地面覆蓋

回答

相關問題