---
title: "การใส่ Animation ให้กับหมุดบนแผนที่"
description: "ตัวอย่างนี้จะแสดงวิธีการใส่ Animation ให้กับหมุด (Marker) บนแผนที่ Longdo Map"
canonical_url: "https://map.longdo.com/docs/v3/javascript/marker/marker-animation/"
last_updated: "2026-09-17T04:30:08.319Z"
---

# การใส่ Animation ให้กับหมุดบนแผนที่

<map-demo preset="v3-marker-animation-1">



</map-demo>

Longdo Map v3 สามารถใส่ Animation ให้กับหมุด (Marker) เวลาปรากฏบนแผนที่หรือเมื่อต้องการดึงดูดความสนใจ แทนที่จะให้หมุดปรากฏขึ้นทันทีแบบไม่มีการเคลื่อนไหว ทำให้ผู้ใช้สังเกตเห็นตำแหน่งที่สำคัญได้ชัดเจนขึ้น

### Drop Animation (หมุดตก)

`map.Overlays.drop()` จะเพิ่มหมุดลงบนแผนที่พร้อมกับเล่น Animation ตกลงมายังตำแหน่งในคำสั่งเดียว โดยไม่ต้องเรียก `add()` แยกต่างหาก

```javascript
var marker = new longdo.Marker(
  { lon: 100.53, lat: 13.74 },
  { draggable: false }
);
map.Overlays.drop(marker);
```

### Bounce Animation (หมุดเด้ง)

`map.Overlays.bounce()` จะทำให้หมุดที่อยู่บนแผนที่แล้วเด้งขึ้นลง เหมาะสำหรับดึงดูดความสนใจไปยังตำแหน่งนั้น โดยหมุดต้องถูกเพิ่มลงบนแผนที่ก่อน (ด้วย `drop()` หรือ `add()`) จึงจะสามารถเด้งได้

```javascript
map.Overlays.bounce(marker);
```

### Stop Animation (หยุด Animation)

การส่งค่า `null` แทนหมุด จะหยุด Animation การเด้งของหมุดที่กำลังทำงานอยู่

```javascript
map.Overlays.bounce(null);
```

> **ดูเพิ่มเติม:** [Overlays Documentation](https://api.longdo.com/map3/doc.html#Overlays)

<code-section src="/snippet/v3/javascript/marker/marker-animation/script.js">



</code-section>

### Animation การเลื่อนหมุดตามเส้นทาง (Path Animation)

`map.Overlays.pathAnimation()` จะเลื่อนหมุดที่อยู่บนแผนที่แล้วให้เคลื่อนที่ไปตาม [Polyline](/javascript/geometry/shapes) ที่กำหนด ด้วยความเร็วที่ระบุ แทนที่จะกระโดดไปยังตำแหน่งปลายทางทันที เหมาะสำหรับจำลองการเคลื่อนที่ เช่น รถหรือไรเดอร์ที่เคลื่อนที่ไปตามเส้นทาง

<map-demo preset="v3-marker-animation-2">



</map-demo>

```javascript
var path = new longdo.Polyline([
  { lon: 100.5231, lat: 13.7367 },
  { lon: 100.5285, lat: 13.7412 },
  { lon: 100.5331, lat: 13.7467 },
]);
map.Overlays.pathAnimation(marker, path, 5);
```

- `marker` : Marker Object ที่ต้องการเลื่อนตามเส้นทาง โดยต้องถูกเพิ่มลงบนแผนที่แล้ว (ด้วย `add()` หรือ `drop()`)
- `path` : Polyline ของเส้นทางที่จะเลื่อนตาม
- `speed` : ความเร็วในการเลื่อนหมุดไปตามเส้นทาง