2

次のようなImageMapオーバーレイがあります。

var options = {
    getTileUrl: function(coord, zoom) {
        return myUrl+"?x=" + coord.x + "&y=" + coord.y + "&z=" + zoom;
    },
    tileSize: new google.maps.Size(256, 256),
    isPng: true
};

var overlay = new google.maps.ImageMapType(options);
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.overlayMapTypes.insertAt(0, overlay);

画像の読み込みには時間がかかることがあるため、地図の読み込みインジケーター（AJAX呼び出しの一般的なアニメーションGIF）を表示したいと思います。マップ全体にインジケーターが1つしかない場合、またはオーバーレイタイルごとにインジケーターが1つしかない場合に、使いやすさが向上するかどうかはわかりません。したがって、両方の解決策と考えを歓迎します。

4

1 に答える 1

5

CSSを使用して、マップを保持するdivを非表示にします。マップ上でイベントまたはおそらくイベントaddEventListenerOnce()をリッスンするために使用します。（どのイベントがより良い結果をもたらすかを確認するために実験する必要があるかもしれません。）イベントが発生したら、マップを保持するdivを表示します。idlebounds_changed

イベントが発生するのを待っている間に進行状況インジケーターを表示するには、少なくとも2つの合理的な方法があります。イベントが発生したときに非表示にする（マップdivを表示することに加えて）別のdivにそれを含めることができます。または、マップdivを別のdiv内にラップし、そのdivの背景画像をアニメーション化された進行状況インジケーター画像に設定することもできます。

結局、あなたのコードは、私が少し前に書かなければならなかったこのブロックに似ているかもしれません：

document.getElementById("map_canvas").style.visibility = "hidden";
var mapType = new google.maps.ImageMapType({
                tileSize: new google.maps.Size(256,256),
                getTileUrl: function(coord,zoom) {
                    return 'img/tiles/'+zoom+'/'+coord.x+'/'+coord.y+'.png';
                }
            });
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.overlayMapTypes.insertAt(0, mapType);
google.maps.addListenerOnce(map, 'idle', function() { document.getElementById("map_canvas").style.visibility = "visible";});
于 2011-05-22T15:55:17.083 に答える