Question

我正在尝试使用该元素绘制一个用户点击提交按钮后屏幕上显示的静态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）。

Answer 1

这是因为第一次没有正确加载图像所以画布没有绘制任何东西。图像在后台加载异步，因此无论如何，您的功能都将继续。

要处理此方案，请尝试：

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
}

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

1 个答案:

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

1 个答案:

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