CSS と JavaScript_html/css_WEB-ITnose を使用してアニメーション化された Google マップ マーカーを作成する

1. はじめに

Web 開発者は、Google Maps API を使用すると、わずか数行のコードを使用して、驚くべき組み込み機能を使用して優れたユーザー エクスペリエンスを作成できます。ただし、マーカーのマッピングにおける柔軟性と創造性の欠如という明らかな欠点もあります。

もちろん、カスタム マークアップ画像、ツールヒント、対応するラベルを追加できますが、これらはすべて静的で、テキスト指向の方法でインタラクティブです。さらに、ユーザーのアクションに応答する対話型マークアップを作成する標準的な方法はありません。

これには単純に満足できなかったので、真にユニークなマッピングを作成する方法を探すことにしました。

この記事では、タグ マッピングに対するこの真にユニークなアプローチを紹介したいと思います。具体的には、CSS3 アニメーション技術を使用してマップにラベルを付ける方法を説明します。この技術に基づいて、マークを踊らせたり、ひねったり、隠したりして、エレガントに画面から飛び出すことができます。

ユーザーがマーカーの上にマウスを移動するか、マーカーをクリックするか、マップ外でトグルを使用すると、CSS アニメーションを使用してマーカーを「復活」させることができます。この記事では、どのプロジェクトでも使用できるシンプルな戦略を紹介します。比較の参考として、他の 2 つの例 - Ryan Connolly (http://jsfiddle.net/ryanoc/86Ejf/) と Felipe Figueroa (http://bl.ocks.org/amenadiel/f4e5bd78b214ff081254) はどちらも同様のメソッドを使用しています。このために。

2. 基本知識

以下に紹介するいくつかの手順を使用するだけで、地図上のマーカーに CSS アニメーション効果のサポートを追加できます。

(1) ステップ 1

マークアップに画像を追加します。画像コードの指定方法は次のとおりです。

var catIcon = {      url: myImageURLhere,      //state your size parameters in terms of pixels      size: new google.maps.Size(70, 60),      scaledSize: new google.maps.Size(70, 60),      origin: new google.maps.Point(0,0)  } 

(2) ステップ 2

タグ宣言で最適化されたパラメーターを false に設定します。これにより、各タグを独立した DOM 要素としてレンダリングできます。

var marker = new google.maps.Marker({      position:latLng,      map: map,      // set the icon as catIcon declared above      icon: catIcon,      // must use optimized false for CSS      optimized: false  }); 

(3) ステップ 3

すべてのタグを 1 つのパネルに編成する役割を担う overlayView オブジェクトを作成します。これで、DOM からこの overlayView オブジェクトにアクセスできるようになります。次のコードを参照してください:

var myoverlay = new google.maps.OverlayView();      myoverlay.draw = function () {          this.getPanes().markerLayer.id='markerLayer';      };  myoverlay.setMap(map); 

上記のコードで getPanes() 関数が呼び出される行では、CSS で使用できるようにマークアップ レイヤーに ID を割り当てます。この overlayView オブジェクトは、別のレイヤーにないマーカーを自動的に収集します。もちろん、この場合、他のレイヤーは提供されないため、このオブジェクトはすべてのタグを収集します。

(4) ステップ 4

次に、CSS テクノロジーを使用して、現在のレイヤー内のすべてのマーカーにアニメーション効果を追加します。このアニメーション効果は 1 回だけ発生することも、継続的に発生することもあります。以下のコードを参照してください:

#markerLayer img {    animation: pulse .5s infinite alternate;    -webkit-animation: pulse .5s infinite alternate;    transform-origin: center;    -webkit-transform-origin: center;  } 

3. より柔軟な設定

上記の手順を使用すると、すぐにすべてのマーカーにアニメーションを追加できます。このセクションでは、アニメーション化されたマーカーをより詳細に制御するためのオプションをさらにいくつか見ていきます。

(1) 外部トグル

たとえば、凡例やクリック可能なトグル ボタンを含めて、ユーザーがさまざまなレイヤーを表示または非表示にできるようにするか、マーカーに特定のレイヤーを表示させたいとします。これにより、特性は対応する CSS アニメーションを変更します。これらのアイデアはすべて簡単に実行できます。 jQuery.click() ハンドラー関数のみを使用する必要があります。次のコード スニペットを参照してください。

$('.btn').click(function(){     $('#markerLayer img').css('animation', 'myAnimationOptionsHere');     $('#markerLayer img').css('-webkit-animation', 'myAnimationOptionsHere')  }) 

(2) クリック/ホバー イベントを作成します

ユーザーがホバーしたときマウス マーカー上で一時停止するかクリックしたときに短いアニメーションを追加したいですか?それも難しいことではありません。まず、すべてのマーカーを保存するグローバル配列を作成します:

var allMarkers=[];

次に、各マーカーを宣言するときに、title 属性を追加して文字列型に変換します。

var marker = new google.maps.Marker({      position:latLng,      map: map,      icon: catIcon,      optimized: false,      title: allMarkers.length.toString()  }); 

次に、配列の長さに応じて title 属性を追加して、タグごとに一意の ID を作成します。最後に、次のコードを使用して配列にタグを追加します。

allMarkers.push(marker); 

最後に、クリック イベントとホバー イベントの実装コードを見てみましょう。注: 単一のタイトル識別子を使用して各タグを識別します:

google.maps.event.addListener(marker, 'click', function() {    var thisTitle= Number(this.title);    $('#markerLayer img').eq(thisTitle).css()...  })  google.maps.event.addListener(marker, 'mouseover/mouseout', function() {    var thisTitle= Number(this.title);    $('#markerLayer img').eq(thisTitle).css()...  }) 

(3) 異なるタグに異なるアニメーション効果を使用します

2 つの別々のタグ タイプを検討することもできます。地図: 野球場とサッカー場。どちらも作成するオーバーレイに自動的に含まれるため、独立したアニメーション効果をさまざまなマーカーに適用する何らかの方法が必要です。やり方は簡単です！ CSS で src 属性を使用し、それぞれのタグに対応する画像 URL と一致させるだけです。以下のコードを参照してください:

#markerLayer img[src='/img/myURLpath'] {      animation: pulse .5s infinite alternate;      -webkit-animation: pulse .5s infinite alternate;      transform-origin: center;      -webkit-transform-origin: center;  } 

4. まとめ

開発者またはデザイナーとしての主な仕事は、ユーザーが好む製品を開発することです。実際、彼らは自分たちが使用している製品に多くの Google マップ アプリが組み込まれているのを見てきました。彼らのより熱い期待に応えられるかどうかは、あなた次第です!

最後に、ユーザーのニーズに合わせてマップ マーカー アニメーションを使用する方法をいくつか紹介します。

l 本物 (猫など) をシミュレートするタグ付き画像がある場合は、対応する CSS アニメーションを使用して自然な動きをシミュレートできます。

l マップ マーカー画像が実際に動くオブジェクト (カウンターなど) ではない場合、CSS アニメーション効果を使用して、画像をクリックしたときにジャンプしたり揺れたりするアニメーションなどの興奮した動作をシミュレートできます。 。

l 各タグに対応するデータがあれば、そのデータにタグを反応させることができます。たとえば、交通量の多い交差点にマークを付けることができます。これらの場所に点滅する感嘆符を置くことができます。

ぜひ試してみて、使い続けてください。そうすれば、あなたのユーザーベースは間違いなく大挙してやってくるでしょう!

元のタイトル: CSS と JavaScript でアニメーション化された Google マップ マーカーを作成

[51CTO の翻訳。パートナー サイトに転載する場合は、元の翻訳者と出典を明記してください: 51CTO.com]