如何从 Google 地图重新创建标志性街景小人-css教程-PHP中文网

首页

web前端

css教程

如何从 Google 地图重新创建标志性街景小人

Mary-Kate Olsen

Dec 19, 2024 pm 04:11 PM

How to Recreate the Iconic Pegman from Google Maps

这是我很长一段时间以来一直想尝试的一个小片段。我终于开始重新创建 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);
};

登录后复制