---
title: "การค้นหาเส้นทางโดยใช้ Longdo Map API"
description: "ตัวอย่างนี้จะแสดงวิธีการค้นหาเส้นทางโดยใช้ Longdo Map API ด้วย JavaScript"
canonical_url: "https://map.longdo.com/docs/v3/javascript/routing/routing-api/"
last_updated: "2026-09-24T14:57:25.586Z"
---

# การค้นหาเส้นทางโดยใช้ Longdo Map API

<map-demo preset="v3-routing-api-1">



</map-demo>

### วิธีการค้นหาเส้นทาง

```javascript
// กำหนดพื้นที่แสดงผลเส้นทาง
map.Route.placeholder(document.getElementById('route-result'));

// เพิ่มจุดเริ่มต้นและจุดหมาย
map.Route.add(new longdo.Marker({ lon: 100.5383, lat: 13.7649 }, { title: 'Start' }));
map.Route.add({ lon: 100.535, lat: 13.7467 });

// ค้นหาเส้นทาง
map.Route.search();
```

### การรับผลลัพธ์เส้นทาง

```javascript
map.Event.bind('pathComplete', function() {
  // เส้นทางถูกค้นหาแล้ว
  var markerList = map.Route.list();
});
```

### การเพิ่มจุดแวะ (Waypoints)

เรียก `Route.add()` มากกว่า 2 ครั้งเมื่อเส้นทางต้องผ่านจุดแวะตามลำดับที่กำหนด ไม่ใช่แค่วิ่งตรงจาก A ไป B — เช่น เส้นทางจัดส่งสินค้าที่ต้องแวะส่งของหลายจุดก่อนถึงปลายทางสุดท้าย `Route.add()` จะเพิ่มจุดต่อท้ายรายการปลายทางเสมอ ดังนั้นเส้นทางจะเรียงตามลำดับที่เพิ่มเข้าไป คือ เรียกครั้งแรกสำหรับจุดเริ่มต้น เรียกอีกครั้งต่อจุดแวะแต่ละจุด และเรียกครั้งสุดท้ายสำหรับปลายทาง

```javascript
// เส้นทางจัดส่งสินค้า: คลังสินค้า -> จุดแวะ 1 -> จุดแวะ 2 -> ปลายทางสุดท้าย
map.Route.add({ lon: 100.5383, lat: 13.7649 }); // คลังสินค้า (จุดเริ่มต้น)
map.Route.add({ lon: 100.5606, lat: 13.7563 }); // จุดแวะ 1
map.Route.add({ lon: 100.5719, lat: 13.7469 }); // จุดแวะ 2
map.Route.add({ lon: 100.535, lat: 13.7467 });  // ปลายทางสุดท้าย

map.Route.search();
```

นอกจากนี้ยังสามารถให้ผู้ใช้เพิ่มจุดแวะเองแบบ interactive โดยคลิกบนแผนที่ทีละจุดได้เช่นกัน

```javascript
// คลิกบนแผนที่เพื่อเพิ่มจุด
map.Event.bind('click', (mousePos) => {
  map.Route.add(map.location(mousePos));
  map.Route.search();
});
```

### การกำหนดสไตล์เส้นทาง (Styling)

โดยค่าเริ่มต้นเส้นทางที่วาดจะใช้ชุดสีที่ Longdo กำหนดไว้ให้ สามารถปรับสไตล์ได้ด้วย `Route.line(type, options)` โดยระบุประเภทของเส้นเส้นทาง (`'road'` สำหรับเส้นทางขับรถปกติ — ส่วน `'air'`, `'rail'`, `'ferry'`, `'destination'`, และ `'focus'` ใช้กับเส้นทาง/หมุดประเภทอื่นๆ) พร้อม object ตาม `GeometryOptions` เช่น `lineWidth` และ `lineColor`:

```javascript
// ปรับเส้นทางขับรถให้หนาขึ้นและเปลี่ยนสี
map.Route.line('road', {
  lineWidth: 6,
  lineColor: '#2563eb'
});

map.Route.add({ lon: 100.5383, lat: 13.7649 });
map.Route.add({ lon: 100.535, lat: 13.7467 });
map.Route.search();
```

> **Tip:** ควรเรียก `Route.line()` ก่อน `Route.search()` เพื่อให้สไตล์ถูก apply ตั้งแต่ตอนที่เส้นทางถูกวาดขึ้นมา

### การจัดการกรณี "ไม่พบเส้นทาง"

หาก routing engine ไม่สามารถหาเส้นทางระหว่างจุดที่กำหนดได้ — เช่น จุดใดจุดหนึ่งไม่มีถนนเชื่อมถึง — `Route.search()` จะไม่ยิง event `pathComplete` แต่จะยิง event `guideError` แทน พร้อมรหัสข้อผิดพลาดเป็นตัวเลข (`404` เมื่อไม่มีเส้นทางระหว่างจุดที่กำหนดเลย):

```javascript
map.Event.bind('pathComplete', function () {
  // พบเส้นทางแล้ว — อ่านค่า map.Route.list() ได้อย่างปลอดภัยตรงนี้
});

map.Event.bind('guideError', function (errorCode) {
  console.warn('ไม่พบเส้นทาง:', errorCode);
  // เช่น แสดงข้อความแจ้งผู้ใช้แล้วให้ลองใหม่ด้วยจุดอื่น
});
```

> **Note:** ควร bind ทั้ง `pathComplete` และ `guideError` ไว้ก่อนเรียก `Route.search()` เสมอ — จะมี event ใดเพียง event เดียวถูกยิงในแต่ละครั้งที่ค้นหา

### โหมดเส้นทาง ประเภทเส้นทาง และข้อจำกัด (Mode, Type, Restrict)

`Route` มีเมธอดฝั่ง SDK ที่เทียบเท่ากับพารามิเตอร์ `mode`, `type`, และ `restrict` ของ [Route Web Service](/javascript/routing/routing-webservice):

```javascript
// เลือกเส้นทางที่สั้นที่สุดแทนโหมดเริ่มต้น "หลีกเลี่ยงการจราจร"
map.Route.mode(longdo.RouteMode.Distance);

// ไม่ใช้ทางด่วนในการคำนวณเส้นทาง
map.Route.enableRoute(longdo.RouteType.Tollway, false);

// จำกัดเส้นทางให้ใช้ได้เฉพาะถนนที่รองรับจักรยาน
map.Route.enableRestrict(longdo.RouteRestrict.Bike, true);

map.Route.add({ lon: 100.5383, lat: 13.7649 });
map.Route.add({ lon: 100.535, lat: 13.7467 });
map.Route.search();
```

- `Route.mode(value)`: กำหนดโหมดการค้นหาเส้นทาง — `RouteMode.Traffic` (หลีกเลี่ยงการจราจร, ค่าเริ่มต้น), `.Cost`, `.Distance` (ระยะทางสั้นที่สุด), `.Walk`, `.Both`, หรือ `.Fly`
- `Route.enableRoute(type, state)`: เปิด/ปิดการใช้ `RouteType` (`.Road`, `.Air`, `.Railway`, `.Ferry`, `.Tollway`, `.Bus`, `.Metro`, `.AllDrive`, `.AllTransit`, `.All`) ในการคำนวณเส้นทาง
- `Route.enableRestrict(restrict, state)`: เปิด/ปิดข้อจำกัด `RouteRestrict` (`.Bike`, `.Wheelchair`)

> **Note:** เมธอดทั้งสามนี้ครอบคลุมพารามิเตอร์ `mode` / `type` / `restrict` ของ webservice ส่วนตัวเลือก `maxresult` ของ webservice (คืนค่าเส้นทางที่เป็นไปได้หลายเส้นในครั้งเดียว) ไม่มีเมธอดฝั่ง SDK ที่เทียบเท่า — `Route` จะคำนวณเส้นทางที่ดีที่สุดเพียงเส้นเดียวเสมอ หากต้องการเส้นทางทางเลือกหลายเส้นในครั้งเดียว ให้เรียก [Route Web Service](/javascript/routing/routing-webservice) โดยตรงแทน

### การล้างข้อมูลเส้นทาง

```javascript
map.Route.clear();
```

เมธอดหลักของออบเจ็กต์ `Route`:

- `Route.placeholder(element)`: กำหนด element ที่จะใช้แสดงผลรายละเอียดเส้นทางแบบ turn-by-turn
- `Route.add(location)`: เพิ่ม marker (หรือ `{ lon, lat }`) เป็นจุดเริ่มต้น จุดหมาย หรือจุดแวะ
- `Route.search()`: ส่งคำขอค้นหาเส้นทางระหว่างจุดทั้งหมดที่เพิ่มไว้ไปยัง routing engine
- `Route.list()`: คืนค่ารายการ marker ทั้งหมดที่ใช้ในเส้นทางปัจจุบัน
- `Route.line(type, options)`: กำหนดสไตล์เส้นทางที่วาด — `lineWidth`, `lineColor`, `fillColor`, `lineStyle` — สำหรับประเภทเส้นทางที่ระบุ
- `Route.mode(value)`: กำหนดโหมดการค้นหาเส้นทาง (เทียบเท่า `mode` ของ webservice)
- `Route.enableRoute(type, state)` / `Route.enableRestrict(restrict, state)`: เปิด/ปิดประเภทเส้นทาง หรือข้อจำกัดเส้นทาง (เทียบเท่า `type` / `restrict` ของ webservice)
- `Route.clear()`: ล้าง marker ของเส้นทางทั้งหมดและลบเส้นทางที่วาดไว้
- `pathComplete` event: ทำงานเมื่อค้นหาเส้นทางสำเร็จและพร้อมให้อ่านผลลัพธ์
- `guideError` event: ทำงานแทน `pathComplete` พร้อมรหัสข้อผิดพลาด เมื่อไม่พบเส้นทาง

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

<code-section src="/snippet/v3/javascript/routing/routing-api/script.js">



</code-section>