如何從 Google 地圖重新創建標誌性街景小人-css教學-PHP中文網

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

Mary-Kate Olsen

發布： 2024-12-19 16:11:10

原創

952 人瀏覽過

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

登入後複製