8

メンバーのディレクトリを作成しています。このディレクトリは、名前と町または都市からの距離の順にメンバーを一覧表示し、Google MapsAPIv3を使用して地図に表示します。

ほぼ思い通りに動作していますが、少し遅いのではないかと心配しています。すでに非同期で読み込んでいますが、マーカーに問題があります。

マップをロードしてから、マーカーを1つずつすばやく連続してドロップアニメーションに表示したいと思います。現時点では遅延があり、それらはすべて一緒にドロップし、マップに表示されてからドロップすることもありますが、これは非常に奇妙に見えます。

PHP foreachスクリプト（MYSQLデータベースから）を使用して、メンバーのjavascript配列を出力しています。マップ上には10〜400個のマーカーがありますが、通常は一度に100個以下です。

簡潔にするために、以下の例には4つのマーカーのみを含めました（前に述べたように、PHP foreachスクリプトから出力されます）。

<script>
var infowindow = null;
$(document).ready(function () { initialize();  });
function initialize() {
    var centerMap = new google.maps.LatLng(53.1,-2.2);
    var myOptions = {
        zoom: 9,
        center: centerMap,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false
    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    setMarkers(map, sites);
    infowindow = new google.maps.InfoWindow({
            content: "loading..."
        });
}

 var sites = [
 ['Joe Bloggs',52.1022,-2.1070,1,"Member &nbsp;<a href=\"#\">Joe Bloggs</a>"],                              
 ['Peter Pan',52.2022,-2.2070,1,"Member &nbsp;<a href=\"#\">Peter Pan</a>"],                                
 ['Andrew Andrewson',52.0322,-2.0170,1,"Member &nbsp;<a href=\"#\">Andrew Andrewson</a>"],                              
 ['Peter Peterson',52.0022,-2.0070,1,"Member &nbsp;<a href=\"#\">Peter Peterson</a>"],  
 ];

function setMarkers(map, markers) {
    for (var i = 0; i < markers.length; i++) {
        var sites = markers[i];
        var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
        var marker = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            title: sites[0],
            zIndex: sites[3],
            html: sites[4],
            animation: google.maps.Animation.DROP
        });

        var contentString = "Some content";
        google.maps.event.addListener(marker, "click", function () {
            infowindow.setContent(this.html);
            infowindow.open(map, this);
        });
    }
}


  function loadScript() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://maps.googleapis.com/maps/api/js?key=my-key-is-here&sensor=false&' +'callback=initialize';
    document.body.appendChild(script);
  }

  window.onload = loadScript;
</script>

これを高速化して、ページの読み込み後にマーカーをドロップアニメーションに表示するにはどうすればよいですか？

4

3 に答える 3

10

TL、DR：デモへのリンク

私の意見では、洗練されたものを作成するには、カスタムアニメーション関数を作成する必要があります。

すぐに使えるgoogle.maps.Animation.DROPとさまざまなsetTimeout設定を試してみましたが、満足のいく設定を思い付くことができませんでした。最大の障害は、少数のマーカードロップが同時に発生すると、アニメーションの滑らかさがすぐに低下し、マーカーの醜い、途切れ途切れの、乱雑な雨が発生することです。それも私のIE7をクラッシュさせました:(

つまり、見栄えの良いDROPのシーケンスが必要な場合、連続するDROP間の時間遅延は比較的大きく（100〜200ミリ秒）、100マーカーでは、最後のマーカーがドロップするまで10〜20秒待つ必要があります。 。エンドユーザーにこのアニメーション全体をじっくりと見てもらうには長すぎると思いますが、DROPの遅延が短いと、マップのアニメーションの見栄えが悪くなります。これは、アニメーションの品質と読み込み速度のバランスです。

回避策の1つは、クリックリスナーをマップに追加して、トリガーされたときに、表示されていない残りのマーカーがすぐに表示されるようにすることです。このロジックはデモに追加していません。

これがJSFiddleのデモです。3つの変数を試してみてください。1つはマーカーの数を制御し、他の2つはマーカーDROP間の遅延を制御します。これらの値を変更してから、をクリックし > Run て変更を表示できます。

いくつかのメモ：

  1. マーカーが上から下に落ちるようにランダムリストを並べ替えます。マーカーの散らばった雨よりも見栄えが良いと思います。また、ソート関数を距離で書き直して、事前定義された中央のDROPに近いサイトを最初に作成することもできます。

  2. タイムアウトをラップする自己実行無名関数があるため、マーカーごとに新しい変数スコープが作成されます。

于 2012-07-07T19:24:34.523 に答える
2

callbackページの読み込みに時間がかかる場合、1つのオプションは、GoogleMapsJavaScriptライブラリを読み込むURLのパラメータとして定義されている可能性のあるを使用してGoogleMapsAPIを非同期で読み込むことです。

<script>
window.onload = loadGoogleMaps;

function loadGoogleMaps() {
   var script = document.createElement("script");
   script.type = "text/javascript";
   script.src =    
     "http://maps.googleapis.com/maps/api/jssensor=false&callback=initialize";
   document.body.appendChild(script);
}

initializeこれにより、Google Maps JavaScriptライブラリが完全にロードされた後に実行される既存の関数を保持できますが、 2回実行されないように、initialize()現在内部にある呼び出しを削除する必要があります。$(document).ready

DROPマーカーがマップ上に配置され、その後にアニメーションが続く2段階のプロセスは表示されないはずです。また、関数のsetMarkers実行にかかる時間が長すぎる場合は、説明している内容の根本的な原因である可能性があるため、関数の実行にかかる時間を確認することもできます。

フォローアップコメントに基づいて編集：

すべてのマーカーを作成したいが、各マーカーの作成の間に遅延を追加したい場合にJavaScriptで使用できるものの1つは、JavaScriptsetTimeout( function, delayInMilliseconds関数です。呼び出し全体でマーカー配列のどこにいるかを追跡する必要がありますが、それは作業を個別の作業単位に分割するために機能します。を使用するsetTimeoutと、各マーカードロップの間に短い遅延を追加できるはずです。これにより、達成しようとしている効果が得られます。

于 2012-07-04T17:01:30.893 に答える
1

マーカーの作成を時間的に間隔を空けるには、window.setTimeout（）を使用できます。次に例を示します。

//UNTESTED!!
            function setMarkers(map, markers) {
                   while (markers.length) {
                    var markerData = markers.shift();
                    window.setTimeout(function(){doSetMarker(markerData,map)},10);// 10 miliseconds. (play with this value).
                    }
                }

                function doSetMarker(markerData,map) {
                    var sites = markerData;
                    var siteLatLng = new google.maps.LatLng(parseFloat(sites[1]), parseFloat(sites[2]));
                    var marker = new google.maps.Marker({
                        position: siteLatLng,
                        map: map,
                        title: sites[0],
                        zIndex: sites[3],
                        html: sites[4],
                        animation: google.maps.Animation.DROP
                    });
                        var contentString = "Some content";
                        google.maps.event.addListener(marker, "click", function () {
                            infowindow.setContent(this.html);
                            infowindow.open(map, this);
                        });

                }
于 2012-07-07T12:47:06.440 に答える