Javascript 直到第二次尝试后才显示画布图像_Javascript_Html_Google Maps_Canvas

Javascript 直到第二次尝试后才显示画布图像

javascript html google-maps canvas

Javascript 直到第二次尝试后才显示画布图像,javascript,html,google-maps,canvas,Javascript,Html,Google Maps,Canvas,我试图使用这个元素来绘制一个静态的谷歌地图图像，一旦用户点击提交按钮，它就会出现在屏幕上。html如下所示： <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <script type="text/javascript" src="https://maps.googleap

我试图使用这个元素来绘制一个静态的谷歌地图图像，一旦用户点击提交按钮，它就会出现在屏幕上。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>

用户第一次单击submit按钮时，什么也没有发生。但是，每次后续单击都将加载图像（即使该选项卡关闭后重新打开）。更改

center0

和

center1

参数将重置页面，并再次强制两次单击以显示Google生成的新图像。这种行为似乎不是来自谷歌地图，因为当我从硬盘加载图像时也会出现同样的问题。这在我测试过的每个浏览器（Firefox、IE和Chrome）中都会发生。

这是因为第一次图像没有正确加载，所以画布没有绘制任何内容。图像在后台异步加载，因此您的函数将继续

要处理此场景，请尝试以下操作：

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
}

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

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