畫布圖像直到第二次嘗試才顯示

我試圖使用該元素來繪製屏幕上顯示的靜態Google地圖圖像，一旦用戶單擊提交按鈕。在HTML看起來像這樣：畫布圖像直到第二次嘗試才顯示

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <script type="text/javascript" 
    src="https://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=true"> 
    </script> 
    <script type="text/javascript" src="createmap.js"> 
    </script> 
</head> 
<body> 
    <form onsubmit="display_map(34.1,-76.08168); return false;"> 
    <input type="submit" value="Submit"/> 
    </form> 
    <canvas id='map-canvas' /> 
</body> 
</html>

而且在createmap.js的display_map（）函數：

function display_map(center0, center1) { 
    var image = new Image(); 
    image.src = 'http://maps.googleapis.com/maps/api/staticmap?center=' 
    + center0 + ',' + center1 + '&zoom=13&size=800x800&sensor=false'; 
    var canvas = document.getElementById('map-canvas'); 
    var context = canvas.getContext('2d'); 
    context.drawImage(image, 0, 0); 
}

的第一次用戶點擊提交按鈕，沒有任何反應。然而，隨後的每次點擊都會加載圖像（即使該標籤已關閉然後重新打開）。更改center0和center1參數將重置頁面，並再次強制兩次點擊來顯示Google生成的新圖像。此行爲似乎不是來自Google地圖，因爲當我從我的硬盤加載圖像時發生同樣的問題。在我測試的每個瀏覽器（Firefox，IE和Chrome）中都會發生這種情況。

來源

2014-01-23 Fred the Fantastic

這是因爲第一次圖像沒有正確加載，所以畫布沒有畫任何東西。圖像在後臺加載異步，因此您的功能將繼續。

處理這種情況與嘗試：

function display_map(center0, center1) { 
    var image = new Image(); 
    image.onload = function() { 
     var canvas = document.getElementById('map-canvas'); 
     var context = canvas.getContext('2d'); 
     context.drawImage(this, 0, 0); 
    } 
    image.src = 'http://maps.googleapis.com/maps/api/staticmap?center=' 
    + center0 + ',' + center1 + '&zoom=13&size=800x800&sensor=false'; 
}

該函數立即返回是一些需要加以考慮的情況下，你做幾個抽獎操作畫布（頂部例如圖形）。

對於這些情況，您需要使用回調，因此，在圖像完成加載調用從onload處理程序中有一個額外的參數下一步：

function display_map(center0, center1, callback) { 
    var image = new Image(); 
    image.onload = function() { 
     var canvas = document.getElementById('map-canvas'); 
     var context = canvas.getContext('2d'); 
     context.drawImage(this, 0, 0); 
     callback(); 
    } 
    image.src = 'http://maps.googleapis.com/maps/api/staticmap?center=' 
    + center0 + ',' + center1 + '&zoom=13&size=800x800&sensor=false'; 
}

現在你可以創建一個調用鏈：

function step1() { 
    display_map(center0, center1, step2); 
} 

function step2() { 
    /// called when step1 has finished 
}

來源

2014-01-23 18:34:18 K3N

This Works。謝謝！ –

畫布圖像直到第二次嘗試才​​顯示

回答

相關問題

畫布圖像直到第二次嘗試才顯示