13

開発中のウェブサイトで Google Maps API v3 を使用しています。マップの下にドロップダウン ボックスがあり、ユーザーはマップに表示されるさまざまなマーカー セットを切り替えることができます。各マーカーは を使用して表示されますmarker.setMap()。

私の問題は、特に IE で、マップが新しいマーカーを表示するのに時間がかかることがあるということです。マップがマーカーを切り替えている間に「読み込み中」のアニメーションを表示したい。しかし、マップが新しいデータの表示を終了したことを検出する方法がわかりません (これはすべて AJAX であるため、ページの読み込みはありません)。イベントのコールバックまたはイベント リスナーがあるsetMap()ので、関数を呼び出して、最後のマーカーの読み込みが完了したときに「読み込み中」アニメーションを停止できますか?

4

2 に答える 2

23

setMap() のコールバックまたはイベント リスナーはないようですが、目的を達成する方法を見つけました。jQueryを使用してGoogleマップを読み込んでいます。これが私のコードです。

マップを初期化するとき、「読み込み」アニメーションを非表示にする「アイドル」イベントのリスナーを設定しました。「idle」イベントは、スクロールまたはズームの変更後にマップの再描画が終了するたびにトリガーされます。

google.maps.event.addListener(this.map, 'idle', function() {
 $('#loading').hide();
});

オーバーレイをクリアする関数では、最初にロード アニメーションを表示し、次に setMap(null) を使用して各マーカーをクリアします。次に、経度を .000000001 だけ変更して、マップをわずかに中心に戻します。これは、すべての setMap() 呼び出しの後に発生し、ロード アニメーションを非表示にする「アイドル」イベントをトリガーします。

// clear overlays from the map
function clearOverlays() {
 $('#loading').show();

 // clear the markers from the active data array
 if (activeData) {
  for (i in activeData) { activeData[i].setMap(null); }
 }
 activeData = '';

 // very slightly recenter the map to trigger the 'idle' event
 var centerlat = MYMAP.map.getCenter().lat();
 var centerlng = MYMAP.map.getCenter().lng() + .000000001;
 recenter = new google.maps.LatLng(centerlat, centerlng);
 MYMAP.map.setCenter(recenter);
}

ちょっとしたハックですが、他の誰かがこれを役に立つと思うことを願っています.

于 2010-08-12T03:12:52.107 に答える
0

多分これが役立つでしょう：http://www.basicslabs.com/Projects/progressBar/#Examples

例: http://www.basicslabs.com/Projects/progressBar/example/progressBar.html

于 2010-08-19T23:17:32.860 に答える