Google Maps Javascript API V3およびトークン管理

深い秋でした。 セクションの開発を任されました。その主なタスクは、マップ上のフィルタリングおよび検索オブジェクトの場所を示すことです。 すぐに目立ったもの-マップ上に10個のオブジェクトを表示している場合でも、ズームを縮小してそれらが単にマージされるようにすることができます。 100個ある場合、不気味なオーバーレイと影が表示されます。 失敗しません!



ソリューションを検索する



解決策は明らかです。マーカーをグループ化する必要があります。 検索の過程で、地図上の多数のマーカーをグループ化するさまざまな方法が検討されているhabrostaに出会いました。 クライアント側のマーカーのグループである「クランチ1〜2」に非常に満足していましたが、...それらが出現した場合、今は記事を書きません。







同じ晩秋に、Google開発チームはGoogle Maps JavaScript API V3に集中的に取り組み、仕事でそれを使用しました。 マーカーを管理するための標準ツールはそこに提供されておらず(v2のドキュメントに警告があったため)、推奨される「オープンソースのMarkerManager」はもちろん、APIの3番目のバージョンに適合していません。



2つの解決策があります:安定したapi v2を使用する(作業をロールバックするだけでなく、各ドメインのキーを生成するという不便さも意味する)か、ブラックジャックとフッカーを使用してマーカーマネージャーを記述します。



実装の詳細



何が起こったのか、どのように使用するのかを知りたい場合は、この段落を安全にスキップして、例に進んでください。 驚くほど新しいものはありません。



グループ化は、「マップをセルに分割した」という原則に従って実行されます。 マップの表示領域にk個のマーカーがある場合、m * n、これらのマーカーを非表示にし、カバーするパートナーの数でグループマーカーを描画します。 それだけです。 グループマーカーの位置座標は、セルの幾何学的中心です。



それがすべてのように思えますが、これはそうではありません。 再描画、いつ行うか? 最も正確で致命的なオプション-マップを移動するたびに。 なぜこのオプションが殺人的なのか、説明する必要はないと思うのですが、それではどうでしょうか? それを熟考して、グリッドマーカーを再描画するのが「合理的な範囲内で」最善であると判断しました。 あなたはしばしばこの表現を聞いたはずですが、おそらくあなたはそのような文字通りの認識を見たことがないでしょう。 「Reasonableの限界」とは、可視領域を含むマップの長方形の領域であり、「その少し後ろ」です。 各次元で1.5枚遅れていると、係数が変化します。



この決定は、特定のポイントに近づいたユーザーが自分の目標に到達するという事実によって決定されます。マップ上のマーカーを可視領域の外側に維持することは、放浪中にすべてのポリマーの損失に突然驚かされないようにするためにのみ必要です。



使い方





var markerManagerOptions = {

icon: {

src: "http://maps.google.com/mapfiles/ms/micons/partly_cloudy.png",

shadow: "http://maps.google.com/mapfiles/ms/micons/partly_cloudy.shadow.png"

},

cell: {

width: 48,

height: 96

},

threshold: 12,

sanity: 1.5

};



var markerManager = new GmapsMarkerManager(map, markerManagerOptions);








手始めに、カスタマイズ可能なもの。 原則として、すべてが非常に透明です:グループマーカーのアイコンのパラメーター、グリッドが構築される可視領域のセルのサイズ、しきい値-グループが削除される近似レベル(すべてのマーカーがそのまま表示される)、および「合理性」、上記のアクション。 すべてのパラメーターはオプションですが、グループマーカーアイコンを構成することをお勧めします;)



さらに簡単です。

var marker = new google.maps.Marker({position: new google.maps.LatLng(-25.363882, 131.044922)}));

markerManager.addMarker(marker);








以上です。 マーカーを削除する必要はありませんでしたが、この機会を得るために、配列内のインデックスによる削除メソッドを追加しました

markerManager.removeMarkerByNumber(0);







おわりに



前後

画像



デモはこちら

ソースコードはこちらです。



この記事が誰かの問題解決に役立ってくれたら嬉しいです。コメントをお待ちしています。



結論結論



記事は私ではなく、特に招待者への謙虚な希望のあるHabrのための善良な人によって作成されました。



All Articles