5

10 個の GroundOverlays を GoogleMap に読み込んでおり、画像の読み込みに関連する進行状況を表示したいと考えています。

var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(42.80059,-115.253806),
new google.maps.LatLng(47.481725,-110.227471));

var layer1 = new google.maps.GroundOverlay("overlays/layer1.png",imageBounds);
layer1.setOpacity(.5);
layer1.setMap(map);

各オーバーレイの実際の画像が読み込まれたか、% が読み込まれたかを検出するにはどうすればよいですか? プログレスバーなどを追加して、オーバーレイがロードされていることをユーザーに表示したいと思います.5秒ほどかかることがあります.

4

3 に答える 3

5

グラウンド オーバーレイとして 1 つの画像がある場合は、次のようにします。

  1. JavaScript で img タグを作成する
  2. そのsrcをoverlays/layer1.pngに設定します
  3. 待機ボックスを表示する
  4. それに onload イベントを追加して、gmaps オーバーレイとしてロードし、待機ボックスを閉じます。

進行状況...それはもう少しブラウザ固有です。しかし、ロードは簡単なので：

function loadOverlay(){
    var img = new Image();
    var img_url = "overlays/layer1.png"
    img.src= img_url;
    $('#wait_for_overlay').show();
    img.onLoad = function(){
        $('#wait_for_overlay').hide();
        var layer1 = new google.maps.GroundOverlay(img_url,imageBounds);
        layer1.setOpacity(.5);
        layer1.setMap(map);
    }
};

これがうまくいく理由：

img オブジェクトを作成し、その 'src' 属性を設定すると、これを行う JavaScript 関数が終了するとすぐに、ブラウザーは要求されたファイルのダウンロードを開始します。

ブラウザはこの画像をローカル キャッシュに入れ、次に onLoad 関数を呼び出して、画像がどうなるかを確認します。

コールバックは実際には img 変数に対して何もしません (おそらくそうすべきです。クロージャー ルールに従って消去されないようにし、バグがある場合は NOP を実行します)、代わりに google-maps 関数を呼び出します。

google-maps 関数は、まったく同じ URL で画像をリクエストします。この URL でブラウザはキャッシュ テーブルを検索し、画像をキャッシュからすぐに戻します。

このトリックは厄介ですが、実際には、Google マップ エンジンはまったく同じ onLoad をバックグラウンドで実行します (これがマップ エンジンのしくみです)。

これであなたの質問が満たされることを願っています...プログレスバーはなく、ロードインジケーターのみです...おそらく、XHRでリクエストして進行状況を確認することでプログレスバーを実行できますが、わかりませんが、トリックは同じです:キャッシュに到達させるための偽のリクエスト。

于 2012-07-27T17:23:28.407 に答える
0

私はあなたがそれを行うことができるとは思えません。ユーザーがロードされた画像にさらにアクセスして制御できるようにするために、GroundOverlay クラスに追加された新しい関数を要求することができます。私のプロジェクトにもそのような機能が欲しいです。

于 2012-07-27T17:10:11.277 に答える