두 번째 시도까지 캔버스 이미지가 표시되지 않습니다.

사용자가 제출 버튼을 클릭하면 화면에 표시되는 정적 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'; 
}

있다. 이제

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

당신이 호출 체인을 만들 수 있습니다 : 이미지가 단일 추가 매개 변수와 함께 onload 핸들러 내에서 다음 단계를 호출로드 완료되면 당신이 그렇게 콜백을 사용할 필요가 이러한 경우에 대한

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

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

출처

2014-01-23 18:34:18 K3N

이것은 작동합니다. 감사! –

두 번째 시도까지 캔버스 이미지가 표시되지 않습니다.

답변

관련 문제