Cara Mencipta Semula Pegman Ikon dari Peta Google

Ini adalah coretan kecil yang saya mahu cuba sejak sekian lama. Saya akhirnya dapat mencipta semula ciri ikonik ini daripada Peta Google: keupayaan untuk menyeret dan menjatuhkan lelaki kecil ini, dikenali sebagai Pegman, untuk bertukar kepada Street View.

TL;DR
Klik dan seret ikon kecil di penjuru kanan sebelah bawah ke atas peta:

HTML

Strukturnya mudah. Saya ada:

• Sebuah #peta untuk digunakan sebagai bekas (dengan imej latar belakang digunakan).
• Bekas #pegman diletakkan di sudut kanan bawah.
• Elemen #pegman itu sendiri untuk watak yang boleh diseret.

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

Nilai putaran berubah berdasarkan interaksi pengguna, yang akan kita selami seterusnya.

Javascript

Semuanya di sini berkisar pada interaksi pengguna. Pengendali JavaScript:

• Mendengar acara tetikus.
• Mengemas kini kedudukan dan putaran Pegman secara dinamik.
• Menambah animasi lancar untuk UX yang lebih baik.

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

Mari pecahkan setiap fungsi:

onMouseDown

Ini memulakan seretan dengan merakam kedudukan awal tetikus dan menogol bendera isDragging.

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

onMouseMove

Ini mengendalikan pergerakan dan putaran Pegman semasa seretan. Ia memastikan:

• Putaran kekal dalam julat (untuk mengelakkan sudut melampau seperti Superman terbang).
• Kemas kini nilai putar secara dinamik menggunakan --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);
};

onMouseUp

Ini menetapkan semula keadaan Pegman sebaik sahaja pengguna berhenti menyeret:

• Putaran ditetapkan semula kepada 0.
• Pegman kembali lancar ke kedudukan asalnya.

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

Fikiran Akhir

Coretan ini menyerlahkan bagaimana animasi mudah dan interaktiviti boleh mencipta semula pengalaman pengguna yang ikonik. Ambilan penting:

• Menggunakan sifat tersuai CSS (seperti --r) memastikan penggayaan dinamik dan terurus.
• Had putaran memastikan rasa yang digilap dan semula jadi untuk interaksi pengguna.
• Tamat masa dan animasi melonggarkan menambah realisme pada gerakan.

Jangan ragu untuk menghentikan CodePen, buat perubahan dan beritahu saya pendapat anda! ??️

By the way...

Saya menggunakan sprite asal daripada google, yang anda boleh lihat di sini dan membuat percubaan:

• keadaan landasan
• keadaan jatuh
• keadaan terjuntai

Tahukah anda? ✨ Lokasi Peta Google yang saya gunakan ialah Kampung Santa Claus yang sebenar!
Fakta menyeronokkan: Nama Finland Santa ialah Joulupukki, dan dia berasal dari Finland ???