如何從 Google 地圖重新創建標誌性街景小人

這是我很長一段時間以來一直想嘗試的小片段。我終於開始重新建立 Google 地圖的這項標誌性功能：拖放這個名為 街景小人 的小傢伙，即可切換到街景視圖。

TL;DR
點選並拖曳右下角的小圖示到地圖上：

超文本標記語言

結構很簡單。我有：

• 用作容器的#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 句柄：

• 監聽滑鼠事件。
• 動態更新街景小人的位置與旋轉。
• 加入流暢的動畫以獲得更好的使用者體驗。

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);

讓我們分解每個功能：

滑鼠按下時

這透過記錄初始滑鼠位置並切換 isDragging 標誌來開始拖曳。

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

滑鼠移動時

這會處理街景小人在拖曳過程中的移動和旋轉。它確保：

• 旋轉保持在一定範圍內（以避免超人飛行等極端角度）。
• 旋轉值使用--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);
};

最後的想法

此片段強調了簡單的動畫和互動性如何重新創建標誌性的使用者體驗。重點：

• 使用 CSS 自訂屬性（如 --r）使樣式保持動態且易於管理。
• 旋轉限制確保了使用者互動的完美、自然的感覺。
• 超時和緩動動畫為動作增添了真實感。

請隨意分叉 CodePen，進行更改並讓我知道您的想法！ ??️

順便一提...

我使用的是Google的原始精靈，你可以在這裡看到並進行實驗：

• 跑道狀態
• 掉落狀態
• 懸空狀態

你知道嗎？ ✨ 我用的谷歌地圖位置才是真正的聖誕老人村！
有趣的事實：聖誕老人的芬蘭名字是 Joulupukki，他來自芬蘭???