2012-01-04 15 views
4

Googleマップマーカーでエフェクト/アニメーションを作成する方法を知りたいと思います。具体的には、一定の時間が経過した後、マーカーを拡大/縮小したり消したりしたいと思います。 HTML5でも可能でしょうか?これを行うためのjqueryエフェクトライブラリはありますか?事前にGoogleマップマーカーでのエフェクトとアニメーション

感謝を

(...私は、マップタイルオーバーレイを作成するためのマップタイルサーバーを使用することができますし、タイルオーバーレイを毎秒を再生成し、私はそれが非常に処理集約的であると思います)

答えて

4

私はこれを行うためのライブラリを見たことがなく、APIにはMarkersを消すための機能はないと言っています。

代わりに、マーカーのように見える独自のCustom Overlayを作成して、マーカーをシミュレートすることができます。カスタムオーバーレイには、通常、カスタムオーバーレイ構築中に割り当てたクラスまたはIDに基づいて、JavaScript/jQueryを使用する場合の不透明度を簡単に制御できるdivが含まれています。

たとえば、thisページを見ると、可視性を切り替えるためのボタンが表示されます。そのJavaScriptを簡単に変更して、何かの不透明度を制御することもできます。

2

私は同様のことをしています。 すべてのマーカーに対してマーカーオプション 'optimized:false'を設定した場合、それぞれが独自の要素を持つため、jQueryを使用してマップ上のすべてのマーカーを$ ['map_canvas img [src * = "filename"] ')、マーカーのカスタムイメージを使用していると仮定します。

これが解決しないのは、配列の各要素が特定のマーカーに返されることです。 マーカをマップに1つずつ追加して、jqueryセレクタを再実行し、返された要素と以前の実行を比較して、新しい要素を確認することができると思います。私はこの部分をテストしていません(最初の段落で私が言っていることがあります)。

次に、画像の不透明度/サイズを直接調整することができます。 これは、多数のマーカーではぎこちないかもしれません。


上記の段落2は愚かです。

マップにマーカーを追加し、optimize:falseオプションを設定していることを確認してください。

var freshlyAddedMarkerImage = $('#map_canvas img[src*="your_marker_icon"][class!="adjustMe"]'); 

新たに追加されたマーカーにはクラスがないため、選択される要素は唯一になります。 classNameを設定する前に、IDを設定して、対応するマーカーオブジェクトが別の配列などに保持されているのと同じインデックス位置の配列に要素を追加することができます。

これは実装するのがはるかに簡単です私は以前に提案した。私はすぐに実際の例を試してみよう。

同じ変換(ズーム/フェード)を共有するマーカのグループがあることが分かっていた場合、同じ年齢なので、それらをすべて追加してjQueryのselectだけを実行します最後に、返された要素をループして、en-masseを調整できるクラスを設定します。

関連する問題