CSSとJavaScriptを使用してアニメーション化されたGoogleマップマーカーを作成します

Googleマップのタグを移動させてください：CSSアニメーションの素晴らしい用途Google Maps APIは、Web開発者向けの便利なツールを提供しますが、そのマップマーキングは柔軟性と創造性に欠けています。この記事では、CSSとJavaScriptを組み合わせて、ユーザーインタラクションに応答するアニメーションマップマーカーを作成する方法を示し、マップをより鮮明で興味深いものにします。

コアポイント：

Google Maps APIは強力ですが、組み込みのマップマーカーには柔軟性がありません。 CSSとJavaScriptの巧妙な組み合わせにより、よりインタラクティブで視覚的に魅力的なアニメーションマーカーを作成できます。
アニメーションタグを実装する重要な手順には、タグイメージの追加、各タグを独立したDOM要素としてレンダリングするように設定し、すべてのタグを整理するための
• を作成し、最後にCSSを使用してアニメーションを使用します。 optimized: false OverlayViewマークアニメーションをより適切に制御するために、外部トグルを追加したり、クリックやホバーなどのユーザーインタラクションのアニメーションを追加したり、異なるタイプのマークに異なるアニメーション効果を適用して、ユーザーエクスペリエンスを改善することもできます。

Google Maps APIは、強力な組み込み関数を備えた数行のコードで優れたユーザーエクスペリエンスを作成します。ただし、マップマーカーをカスタマイズするには明確な欠点があります。柔軟性と創造性の欠如です。

カスタムマーカーイメージ、ツールチップ、タグを追加できますが、これらはマップに多くのマーキングポイントがある場合に乱雑に見える静的なテキストインタラクションです。現在、ユーザーアクションに応答するインタラクティブなタグを作成する標準的な方法はありません。

この問題を解決するために、本当にユニークなマップを作成する方法を探りました。つまり、マップマークにCSS3アニメーションを追加し、ジャンプ、回転、または非表示にしてビジュアルを強化しました。

ユーザーがマークの上に浮かんだとき、マークをクリックするか、マップの外側のトグルボタンを使用した場合、任意のCSSアニメーションを使用してマークを動かすことができます。このガイドは、あらゆるプロジェクトに適用できる簡単な戦略に焦点を当てます。 （Ryan ConnollyとFelipe Figueroaの2つの例は、同様のアプローチを使用しています。）

以下は、アニメーションマーカーの簡単な例です。有名なチェシャー猫は、マサチューセッツ州の3つの異なる場所のマーカーです。右上隅のトグルボタンを使用してアニメーションを変更できます。

Codepenサンプルリンク

基本的な手順：

次の手順では、マップマークにCSSアニメーション関数を追加するように導きます。 ステップ1：タグ付けされた画像を追加

次のコードで画像を指定します

ステップ2：

を設定します

var catIcon = {
    url: myImageURLhere,
    size: new google.maps.Size(70, 60),
    scaledSize: new google.maps.Size(70, 60),
    origin: new google.maps.Point(0,0)
};

これにより、各マーカーを独立したDOM要素としてレンダリングできます。

var catIcon = {
    url: myImageURLhere,
    size: new google.maps.Size(70, 60),
    scaledSize: new google.maps.Size(70, 60),
    origin: new google.maps.Point(0,0)
};

ステップ3：OverlayView

を作成します

これにより、1つのパネルのすべてのマーカーが整理され、DOMからアクセスできるようになります。

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

行で、IDをタグレイヤーに割り当ててCSSで使用できます。これは、他の層にないマーカーを自動的に収集します。この場合、他のレイヤーはないため、すべてのマーカーを収集します。 getPanes() OverlayView

ステップ4：CSSを使用してアニメーションを追加します

これは、1回限りのアニメーションまたは連続アニメーションにすることができます：

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

柔軟なオプション：

上記の手順は、すべてのマーカーをすぐにアニメーション化します。アニメーションマークアップを制御するためのより細かい方法があります：

• 外部スイッチ：

  jQueryハンドラーを使用すると、アニメーションの表示と非表示を簡単に制御したり、異なるタグのアニメーション効果を変更したりできます。 .click()

• Click/Hoover：すべてのタグを保存するグローバル配列を作成し、各タグに一意の属性を追加することにより、クリックイベントとホバーイベントをアニメーション化できます。 title 異なるマーカータイプのさまざまなアニメーション：
• さまざまなアニメーション：

  CSSセレクターを使用して、マーカーイメージの属性に従って異なるタイプのマーカーに異なるアニメーションを適用します。 src

概要：

開発者またはデザイナーとして、あなたの主な目標は、ユーザーが好む製品を作成することです。ユーザーは多くのGoogleマップ製品にさらされており、マップを際立たせる時が来ました！

マップマークアニメーションを使用して、次の方法を使用してユーザーエクスペリエンスを向上させることができます。

実際の移動オブジェクト（猫など）と同様のマーカー画像の場合、自然運動に対応するCSSアニメーションで追加できます。

従来のモビリティを持たないマーカー画像（ストアなど）の場合、ジャンプやジッターなどのユーザークリックに反応するように見えるアニメーション。

• データが各タグに対応する場合、データに基づいてタグを反応させることができます。たとえば、忙しい交差点の場合、その上に点滅する感嘆符を追加できます。
それを試して、ユーザーがあなたの仕事を賞賛するのを待ちます！

faqs：

（元のテキストに記載されているFAQコンテンツをここに追加する必要があり、コンテンツの一貫性を維持し、重複を避けるために、対応する擬似オリジナルの書き直しを実行する必要があります。）

以上がCSSとJavaScriptを使用してアニメーション化されたGoogleマップマーカーを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。