MM RouteTutorial

การใช้งานร่วมกับ 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>

 ทดลองเขียนคำสั่ง และดูผลลัพธ์

ตัวอย่างอื่นๆ