การใช้งานร่วมกับ MM Map เบื้องต้น
1. สร้่างแผนที่ด้วย MM Map API
ตามวิธีใน Tutorial: แนะนำการใช้งาน MM Map API เบื้องต้น
2. เพิ่ม MM Route API JavaScript Library
<script type="text/javascript" src="http://mmmap15.longdo.com/mmroute/mmroute.jsp?key=[routekey]"></script>
โดยใส่ต่อจาก MM Route API JavaScript Library และ [routekey] เป็น key ของ webpage ที่ต้องการใช้ MM Route API (key เดียวกับ MM Map API)
ซึ่งสามารถขอได้จาก website ของ Longdo Map โดยการสมัครเป็น user อ่านรายละเอียดการขอ key MM Map API
3. เพิ่ม DIV เปล่าสำหรับแสดงข้อมูลการเดินทาง
<div id="mmrouteDiv"></div>
และกำหนด style ตามที่ต้องการ เช่น
#mmrouteDiv { position:absolute; left: 0px; top: 400px; width: 600px; }
หมายเหตุ: ถ้าต้องการให้ขนาด DIV คงที่ ให้กำหนด overflow เป็น auto เนื่องจากข้อมูลการเดินทางมีความยาวไม่แน่นอน และ DIV ควรกว้างอย่างน้อย 215px
4. เรียกใช้ MM Route API
mmroute.init(mmmap, document.getElementById('mmrouteDiv'));
parameter แรกคือ MMMap object และ parameter ที่สองคือ DIV จากขั้นตอนที่ 3 โดยใส่ใน function สำหรับสร้าง map object หลังจากสร้าง map object แล้ว
5. เพิ่มคำสั่งของ MMRoute ใน menu เมื่อ click ขวา
mmroute.useDefaultRightClickMenu();
ใส่คำสั่งนี้หลังจากเรียกใช้ MM Route API แล้ว
คำสั่งทั้งหมด
<head> <style type="text/css"> #mmmapDiv { position:absolute; left: 0px; top: 0px; } #mmrouteDiv { position:absolute; left: 0px; top: 400px; width: 600px; }
</style> <script type="text/javascript" src="http://mmmap15.longdo.com/mmmap/mmmap.php?key=[mapkey]"></script> <script type="text/javascript" src="http://mmmap15.longdo.com/mmroute/mmroute.jsp?key=[routekey]"></script> <script type="text/javascript"><!-- function init() { mmmap = new MMMap(document.getElementById('mmmapDiv'), 13.767734, 100.5351375, 12, 'traffic+overlay'); mmroute.init(mmmap, document.getElementById('mmrouteDiv')); mmroute.useDefaultRightClickMenu(); } --></script> </head> <body onload="init();"> <div id="mmmapDiv"></div> <div id="mmrouteDiv"></div> </body> </html>
การแสดงเฉพาะข้อมูลการเดินทาง
1. เพิ่ม MM Map API และ MM Route API JavaScript Library
<script type="text/javascript" src="http://mmmap15.longdo.com/mmmap/mmmap.php?key=[mapkey]"></script> <script type="text/javascript" src="http://mmmap15.longdo.com/mmroute/mmroute.jsp?key=[routekey]"></script>
2. เพิ่ม DIV เปล่าสำหรับแสดงข้อมูลการเดินทาง
<div id="mmrouteDiv"></div>
และกำหนด style ตามที่ต้องการ เช่น
#mmrouteDiv { position:absolute; left: 0px; top: 0px; width: 100%; }
3. เรียกใช้ MM Route API
function init() { mmroute.init(null, document.getElementById('mmrouteDiv')); }
parameter แรกให้กำหนดเป็น null (ไม่ใช้แผนที่) และ parameter ที่สองคือ DIV จากขั้นตอนที่ 2
<body onload="init();">
เรียกใช้ function นี้ ใน event onload ของ body
4. กำหนดรูปแบบการค้นหา
mmroute.setAutoSearch(false); mmroute.setSearchMode('cb');
คำสั่งแรกจะปิดการทำงานของการหาเส้นทางใหม่โดยอัตโนมัติ
คำสั่งที่สองจะกำหนดให้หาเส้นทางแบบ เดินทางไปตามถนนหลัก / ค้นหาแบบจำกัดขอบเขต โดยความหมายของ Search Mode ดูได้ที่นี่
ใส่คำสั่งทั้งสองหลังจากเรียกใช้ MM Route API แล้ว
5. เพิ่มจุดหมาย และแสดงการเดินทาง
mmroute.addDestination(13.7327, 100.5820); mmroute.addDestination(13.7435, 100.5622); mmroute.searchRoute();
ใส่คำสั่งนี้หลังต่อจากคำสั่งในข้อ 4
คำสั่งทั้งหมด
<html> <head> <style type="text/css"> #mmrouteDiv { position:absolute; left: 0px; top: 0px; width: 100%; } </style> <script type="text/javascript" src="http://mmmap15.longdo.com/mmmap/mmmap.php?key=[mapkey]"></script> <script type="text/javascript" src="http://mmmap15.longdo.com/mmroute/mmroute.jsp?key=[routekey]"></script> <script type="text/javascript"><!-- function init() { mmroute.init(null, document.getElementById('mmrouteDiv')); mmroute.setAutoSearch(false); mmroute.setSearchMode('cb'); mmroute.addDestination(13.7327, 100.5820); mmroute.addDestination(13.7435, 100.5622); mmroute.searchRoute(); } --></script> </head> <body onload="init();"> <div id="mmrouteDiv"></div> </body> </html>
ตัวอย่างอื่นๆ
- การใช้ event เพื่อทำงานอื่นต่อหลังจากได้รับข้อมูลการเดินทาง
- การแสดงเส้นทางบนแผนที่แบบเปลี่ยนแปลงไม่ได้
- การแสดงข้อมูลที่ต้องการเอง
- การใช้งานแบบไม่ผ่าน API (Document)
- การเปลี่ยนภาพต่างๆและจำนวนจุดหมาย (Document 1, 2, 3)
- การดึงเส้นถนนออกมาเพื่อให้แสดงผลค้างไว้เมื่อหาเส้นทางอื่น หรือนำไปใช้งานต่อ (Document)
- การแสดงเฉพาะเส้นทาง
- ทดลองใช้งาน