Google マップから象徴的なペグマンを再作成する方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

Google マップから象徴的なペグマンを再作成する方法

Mary-Kate Olsen

Dec 19, 2024 pm 04:11 PM

How to Recreate the Iconic Pegman from Google Maps

これは、私が長い間試してみたかった小さなスニペットです。私はついに、Google マップのこの象徴的な機能を再現することにしました。ペグマン として知られるこの小さな男をドラッグアンドドロップしてストリートビューに切り替える機能です。

TL;DR
地図上の右下隅にある小さなアイコンをクリックしてドラッグします:

HTML

構造は単純です。私が持っているもの:

コンテナとして機能する #map (背景画像が適用されています)。
#pegman-container が右下隅に配置されています。
ドラッグ可能なキャラクターの #pegman 要素自体。

<div>



<h2>
  
  
  CSS
</h2>

<p>Positioning everything is simple, as you can see in the source code above, but the most important part is the rotate property. This is dynamically updated using JavaScript:<br>
</p>

<pre class="brush:php;toolbar:false">#pegman {
  /* other styles */
  rotate: var(--r);
}

ログイン後にコピー

回転値はユーザーの操作に基づいて変化します。これについては次に詳しく説明します。

JavaScript

ここでのすべてはユーザーインタラクションを中心に展開します。 JavaScript ハンドル:

マウスイベントをリッスンします。
ペグマンの位置と回転を動的に更新します。
UX を向上させるためにスムーズなアニメーションを追加します。

const pegman = document.querySelector('#pegman');
let isDragging = false;
let initialX = 0;
let initialY = 0;
let inactivityTimeout;
let lastX = 0;
const timeout = 25;
const maxDegrees = 50;

// Event listeners
pegman.addEventListener('mousedown', onMouseDown);
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);

ログイン後にコピー

各機能を詳しく見てみましょう:

onMouseDown

これは、マウスの初期位置を記録し、isDragging フラグを切り替えることによってドラッグを開始します。

const onMouseDown = (e) => {
  isDragging = true;
  initialX = e.clientX;
  initialY = e.clientY;
};

ログイン後にコピー

onMouseMove

ドラッグ中のペグマンの移動と回転を処理します。それは以下を保証します:

回転は一定の範囲内に留まります (スーパーマンの飛行のような極端な角度を避けるため)。
回転値は --r を使用して動的に更新されます。

const onMouseMove = (e) => {
  if (!isDragging) return;

  const dy = e.clientY - initialY;
  const dx = e.clientX - initialX;

  // Limit rotation range
  let rx = Math.max(-maxDegrees, Math.min(maxDegrees, dx - lastX));
  pegman.setAttribute('style', `--r: ${rx}deg`);

  // Animate Pegman's position
  pegman.animate({ translate: `${dx}px ${dy}px` }, {
    duration: 100,
    fill: 'forwards',
  });

  // Reset rotation after inactivity
  clearTimeout(inactivityTimeout);
  inactivityTimeout = setTimeout(() => {
    lastX = dx;
    pegman.setAttribute('style', `--r: 0deg`);
  }, timeout);
};

ログイン後にコピー

マウスアップ時

これにより、ユーザーがドラッグを停止するとペグマンの状態がリセットされます:

回転が 0 にリセットされます。
ペグマンはスムーズに元の位置に戻ります。

const onMouseUp = () => {
  isDragging = false;

  // Reset rotation
  pegman.setAttribute('style', `--r: 0`);

  // Animate Pegman back to its original position
  pegman.animate({ translate: `0px 0px` }, {
    duration: 500,
    fill: 'forwards',
    easing: 'ease',
  });

  // Clear residual state
  inactivityTimeout = setTimeout(() => {
    lastX = 0;
  }, timeout);
};

ログイン後にコピー