如何从 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，进行更改并让我知道您的想法！ ??️

顺便一提...

我使用的是谷歌的原始精灵，你可以在这里看到并进行实验：

• 跑道状态
• 掉落状态
• 悬空状态

你知道吗？✨ 我用的谷歌地图位置才是真正的圣诞老人村！
有趣的事实：圣诞老人的芬兰名字是 Joulupukki，他来自芬兰???