Googleマップには約200個のマーカーがあります。それはそれほど多くなく、デフォルトの google.maps.Marker ファクトリを使用してすべてを描画するのは比較的高速です。
しかし、私の場合、すべてのマーカーの位置が常に変化するため、すべてをアニメーション化し、各マーカーの後にトラックを描画する必要があります。その他の条件は、すべてのマーカーが約 20x20km の小さなエリアに配置されていることです。
そのため、1 つの大きなキャンバス レイヤーを使用し、それらのすべてのマーカーを 1 回のループで再描画します。ここには 3 つの方法があります。
1 つ目は、google.maps.OverlayView を使用することです。絶対配置の canvas 要素を作成し、それを google.maps ペインの overlayLayer に追加します。bounds_changed イベントの場合、キャンバスの位置とサイズを再計算し、すべてのマーカーを再描画します。 実際には、これは少し遅くなります。マップをドラッグする速度が速すぎると、マーカーの再描画に遅れが生じます。
絶対配置ではなく、相対的に配置されたキャンバスを使用します。その後、bounds_changed イベントでは何もせず、zoom_changed イベントでのみキャンバスを再描画します。 ドラッグによるラグはありませんが (キャンバス自体をドラッグするため)、すべてのマーカーを含むキャンバスを計算して作成する必要があり、最大ズームの場合は約 5000x5000px (大量のメモリ) になります。
- OverlayView をまったく使用せず、代わりにマップ全体を 1 つの外側のキャンバスでホバーし、bounds_changed イベントでマーカーを再描画します。 ここでは、キャンバスの位置とサイズを再計算しないので、少し速くなりますが、マップの動きが影響しないように、コントロールの下とタイル レイヤーの上にキャンバスを追加するのは難しいようです。
では、どのような方法を好むでしょうか？
更新。唯一の合理的な方法は最初の方法です。私はこれに関連するタスクを解決するために多くの時間を費やしてきました。Google マップ上に多数の移動マーカーを描画する方法に関する記事 (ロシア語でhttp://habrahabr.ru/post/195950/ ) と、4 つの異なるエンジンを比較するデモがあります: http://kasheftin.github .io/gmaps/