0

クリック可能な 5000 個のマーカーを表示する Google マップ v3 を読み込もうとしています。私のJSには、場所ごとに10行が含まれています：

              var myLatlng_4821 = new google.maps.LatLng(43.0754329,-71.4699752);
              var contentString_4821 =  "<b>Place 1</b>";
              var infowindow_4821 = new google.maps.InfoWindow({content: contentString_4821});
              var marker_4821 = new google.maps.Marker({
                                          position: myLatlng_4821, 
                                          map: map, 
                                          icon: image
                                      });
             google.maps.event.addListener(marker_4821, 'click', function() {
                                        infowindow_4821.open(map,marker_4821);
                                      });

したがって、50 000 行の js (5MB) が得られます。キャッシュしたいのですが、herokuではページの読み込みに30秒以上かかることが許可されていないため、一度もキャッシュできません。

このページをより速くロードするためのトリックはありますか? ローカルでしかできませんでした（45秒〜）。他にロードするものはありません。RoRを使用しています。

どうもありがとう！

解決策（それはかなりクールです）。

 var myLatlng = [];
 var infowindow = [];
 var marker = [];

                  function MakeInfoWindowEvent(map, infowindow, marker) {  
                     return function() {  
                        infowindow.open(map, marker);
                     };  
                  }

                  for (var i=0;i < places.length;i++)
                  {   

                        myLatlng[i] = new google.maps.LatLng(places[i][0],places[i][1]);

                         infowindow[i] = new google.maps.InfoWindow({
                                 content: places[i][2]
                             });

                         marker[i] = new google.maps.Marker({
                              position: myLatlng[i],
                              map: map
                          });

                           google.maps.event.addListener(marker[i], 'click', MakeInfoWindowEvent(map, infowindow[i], marker[i]))

                  }
         }
4

3 に答える 3

3

私の理解が正しければ、例のコードが 5000 回繰り返されており、'4821'、lat&lng および content 文字列が 5000 個のマーカーごとに異なっていますか?

もしそうなら、コードではなくデータが「繰り返される」ようにアプローチを変更する必要があります...

var markers = [
    [43.0754329,-71.4699752,"Info for first marker"],
    [45.0473490,-56.47688356,"Info for second marker"],
    .
    .
    .
    [20.1234384,12.23462566,"Info for last marker"]
];
for(var i=0; i < markers.length; i++){
    var latLng = new google.maps.LatLng(markers[i][0], markers[i][1]);
    var contentString =  markers[i][2];              
    var infowindow = new google.maps.InfoWindow({content: contentString});
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: image
    });
    google.maps.event.addListener(marker, 'click', function()
    {
        infowindow.open(map,marker);
    });
}

これにより、ページのサイズが大幅に縮小され、キャッシュの問題が解決される可能性があります。

ただし、警告の言葉 - 上記のコードは、繰り返されるコードを削除してデータ ルックアップに置き換える方法を示しているにすぎませんが、非常に多くの InfoWindow インスタンスを一度に作成すると問題が発生する可能性があります (リスナー内に InfoWindow を作成する方がよいでしょう)。また、クロージャー内の変数の可視性については完全には確信が持てないため、リストの最後の項目の属性を持つ 5000 個のマーカーになる可能性があります (わずかな変更が必要になる場合があります)。

于 2010-11-23T08:49:18.510 に答える
2

単一のマーカーに必要なすべての情報は次のとおりです。

[lat,lng,contentString]

...このデータを配列に格納して、配列をループすることができます。contentString によっては、150KB 以上のものが必要になるはずですが、これは大きな問題にはなりません。

マークに関連するデータが変更されない場合は、外部の js ファイルを使用できるため、ブラウザーは今後のアクセス時にキャッシュからそれらを使用できます。

于 2010-11-23T08:22:58.813 に答える
0

InfoWindowGoogleとのコンストラクターのオーバーヘッドがどの程度かはわかりませんMarkerが、かなりの量になると想像できますが、クロージャー変数を使用して新しい関数を追加することで、ルーチン内のすべてのオブジェクト。

これが問題の大部分を占める可能性があり、メモリ リークの典型的なシナリオです。この投稿から受け入れられた回答を参照してください。

必要なものを配列に格納し、必要な場合にのみクリック ハンドラーでインスタンス化する方がよいことに同意します。

于 2010-11-23T08:31:32.773 に答える