4

静的な Google マップを含むページを作成しようとしています。ページのサイズが変更されると、マップが動的に変更されます。ページのサイズ変更時に、ページ上の要素のサイズが一致することを定期的にチェックした後に起動される関数に次のコードがあります。

if (imageDownloadEnabled) {
   url = 'http://maps.googleapis.com/maps/api/staticmap?center=' + userLat + ',' + userLng + '&zoom=14&size=' + ((theWidth/2)|0) + 'x'+ ((theHeight/2)|0) + '&sensor=false&scale=2';
   newImage = $('<img />');
   console.log('Retrieving map from ' + url);

   newImage.error( function() { 
      console.log("error loading image");
      imageDownloadEnabled = false;
   }).load(function(eventObject) {
      console.log("done loading image");
      console.dir(eventObject);
      $('#maps-image').replaceWith(newImage);
      newImage.attr('id', 'maps-image');
   }).attr('src', url);
/**/
} else {
   console.log('disabled');
}

Google マップ API がオーバーロードすると (私のバグが原因で無限ループが発生したため)、403 エラーと代替画像が表示されます。ただし、エラー イベント ハンドラは呼び出されません。

これを回避する方法はありますか？403 が発生した場合に、ページが Google からの新しい画像のリクエストを停止することを確認したいと思います。

4

3 に答える 3

1

.load の完全なコールバック関数を使用してみて、textStatus の値を確認してください。

.load($url,function(responseText, textStatus, XMLHttpRequest) {
    if(textStatus=="error") {
        //do something
    }
});
于 2012-09-05T13:34:13.197 に答える
0

画像の読み込みに失敗したかどうかを知りたいだけの場合は、読み込みビットは必要ないと思います。次の例が役に立ちます。

.error（）は、.bind（'error'、handler）のショートカットです。

ロードされた（documentready）jqueryが無効なファイルで置き換えようとすると、プリセットsrcは正常にロードされ、できない場合はgoogleロゴにフォールバックします。

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#foo-image").error(function(){
                    alert("error loading image, substituting...");
                    $(this).attr("src","http://www.google.co.uk/images/srpr/logo3w.png");
                }).attr("src", "missing.png");
            });
        </script>
    </head>
    <body style="font-family:arial; font-weight:bold;">
        <img id="foo-image" src="http://www.iskin.co.uk/wallpapers/imagecache/ipad/union_flag_wallpaper.jpg" />
    </body>
</html>
于 2012-09-05T17:53:29.803 に答える
0

色々と調べた末にたどり着いたのがこれです。

問題は、Google が 403 ステータスと共に画像を返すため、onload イベントが発生することです。したがって、コードが含まれる div のサイズに関係なく、コードは 10px x 10px のエラー画像をロードします。

秘訣は、メモリ内の Image() を使用し、URL をロードして、onload イベントで画像のサイズを確認することでした。画像が小さすぎる場合は、代役を読み込みます。

コード ：

if (imageDownloadEnabled) {
    url = 'http://maps.googleapis.com/maps/api/staticmap?center=' + userLat + ',' + userLng + '&zoom=14&size=' + ((rightWidth/2)|0) + 'x'+ ((rightHeight/2)|0) + '&sensor=false&scale=2';
    oldMap = $('#maps-image');
    var img = new Image();
    img.onload = function() {
        if(this.width < 100 || this.height <100) {
            console.log('Google 403, loading standin');
            /*  disable image download */
            imageDownloadEnabled = false;
            oldMap.attr('src', standinUrl);
        } else {
            oldMap.attr('src', url);
        }
    }
    img.onerror = function() {
        console.log('Error, loading standin');
        oldMap.attr('src', standinUrl);
    }
    img.src = url;
} else {
    oldMap.attr('src', standinUrl);
}

明確でない場合は、特定のブラウザー サイズ以下ではマップを削除します。そのため、onload 関数で画像サイズを確認するだけです。

于 2012-09-06T09:35:17.733 に答える