การปรับเปลี่ยนรูปแบบการแสดงผลเส้นทางระหว่างพิกัดจุดบนแผนที่ Google Map APIs ด้วย DirectionsTravelMode

by
Post Views: 971

          ก่อนที่เราจะไปเริ่มเนื้อหาของบทความี้ ผู้เขียนต้องขอท้าวความเดิมตอนที่แล้วของบทความก่อน ซึ่งผู้เขียนได้พูดถึงวิธีการแสดงผลเส้นทางทางระหว่างพิกัดจุดบนแผนที่ Google Map APIs ด้วย DirectionsService ในเบื้องต้นไว้ (สามารถศึกษาเพิ่มเติมได้จากบทความ : การแสดงเส้นทางระหว่างพิกัดจุดบนแผนที่ Google Map APIs ด้วย DirectionsService ในเบื้องต้น )  สำหรับในบทความนี้ผู้เขียนจึงอยากต่อยอดการทำงาน และเพิ่มลูกเล่นให้กับการแสดงผลแผนที่ด้วยการปรับเปลี่ยนการกำหนดรูปแบบการแสดงผลของเส้นทางให้ผู้เยี่ยมชมเว็บไซต์  ซึ่งเราจะให้ผู้ใช้สามารถเลือกรูปแบบในการแสดงผลได้ว่า ต้องการดูเส้นทางในรูปแบบใดตามรูปแบบ Mode ที่ผู้ใช้เลือกมา เช่น เส้นทางเดิน ทางถนน หรือขนส่งสาธารณะ เป็นต้น โดยวิธีการดังกล่าวนี้เหมาะกับเว็บไซต์ที่มีความเกี่ยวข้องกับความต้องการที่ต้องการทราบเส้นทางในแต่ละรูปแบบ เพื่อเป็นประโยชน์ในการนำไปประยุกต์ใช้กับงานของแต่ละท่านได้ค่ะ

   ตัวอย่างผลลัพธ์ที่ได้จากบทความที่แล้ว 

ซึ่งจากตัวอย่างโค้ดในบทความที่แล้ว การกำหนด DirectionsTravelMode เป็น DRIVIING ซึ่งในความเป็นจริงแล้วยังมีรูปแบบอื่นๆให้เลือกใช้ด้วยกันทั้งหมด 4 รูปแบบ ดังนี้

DRIVING (Default):เป็นโหมดตั้งต้นให้หากไม่ได้มีการกำหนดไว้ ซึ่งเป็นโหมดที่แสดงเส้นทางการขับขี่ด้วยยานพาหนะ
BICYCLING: เป็นโหมดสำหรับเส้นทางที่เตรียมไว้สำหรับผู้ขับขี่จักรยาน
TRANSIT: เป็นโหมดสำหรับแสดงเส้นทางระบบขนส่งสาธารณะ เช่น  รถบัส รถไฟ หรือแม้แต่เครื่องบิน เป็นต้น
WALKING: เป็นโหมดสำหรับแสดงเส้นทางการเดินถนน

          ซึ่งผู้เขียนจะขอยกตัวอย่างในส่วนของการเลือกรูปแบบเส้นทางและผลลัพธ์ของแต่ละรูปแบบ ดังตัวอย่างโค้ดต่อไปนี้

  • การกำหนดรูปแบบของเส้นทางในการแสดงผลบนแผนที่
  1. โค้ด Javascript 
     <script type="text/javascript">
function initialize() {
 // ประกาศเรียกใช้งาน DirectionsService เพื่อการแสดงผลให้มีลักษณะเป็น Global
 window.directionsService = new google.maps.DirectionsService();
 window.directionsDisplay = new google.maps.DirectionsRenderer();
 var map;
 var bounds = new google.maps.LatLngBounds();
 var mapOptions = {
 mapTypeId: 'roadmap'
 };

// แสดงผลแผนที่ในหน้าจอตาม Element ที่กำหนด
 map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
 map.setTilt(45);

// กำหนดพิกัดจุดให้กับจุดเริ่มต้นและเส้นสุด
 window.markers = [
 ['Place1', 51.501546, -0.142000],
 ['Place2', 51.512051,-0.091225]
 ];
// ให้แสดงผลสิ่งที่ตั้งค่าไว้ในพื้นที่แผนที่ที่กำหนด
 directionsDisplay.setMap(map);
// กำหนดค่าเริ่มต้นของรูปแบบให้เป็นเส้นทางการเดิน (walking mode)
 calcRoute();
}
// เป็นฟังก์ชั่นในการคำนวณเส้นทางระหว่างสองจุดพิกัดบนแผนที่และเลือกกำหนดค่า Mode ในการแสดงผล
 function calcRoute() {
  var selectedMode = document.getElementById('travelType').value;
  var request = {
 
  origin: new google.maps.LatLng(markers[0][1], markers[0][2]),
 
  destination: new google.maps.LatLng(markers[1][1], markers[1][2]),

//// //กำหนดรูปแบบการแสดงผลเส้นทางโดยเริ่มต้นให้เป็นเส้นทางการเดิน(ตามรายการแรกที่เลือก)
  travelMode: google.maps.TravelMode[selectedMode]
  };
  
 directionsService.route(request, function(response, status) {
 if (status == google.maps.DirectionsStatus.OK) {
 directionsDisplay.setDirections(response);
 }
 });
 }
 </script>
  2. ส่วนของการแสดงผลใน body 
    <body> 
<div id="map_wrapper">
 <div id="map_canvas" class="mapping"></div>
</div>
<div id="travel_selector">
 <p><strong>Mode of Travel: </strong>
 <select id="travelType" onchange="calcRoute();">
 <option value="WALKING">Walking</option>
 <option value="BICYCLING">Bicycling</option>
 <option value="DRIVING">Driving</option>
 <option value="TRANSIT">Transit</option>
 </select></p>
</div>
</body>
  3. ผลลัพธ์ในแต่ละรูปแบบ
  • แบบที่ 1 DRIVING Mode :

 

  • แบบที่ 2 BICYCLING Mode:

  • แบบที่ 3 TRANSIT Mode:


  • แบบที่ 4 WALKING Mode:


              จากตัวอย่างจะเห็นได้ว่าเป็นพิกัดของประเทศในต่างแดน เนื่องจากก่อนหน้านี้ ผู้เขียนลองใช้พิกัดจุดบนพื้นที่ประเทศไทย แต่พบว่ามีบาง Mode ยังไม่รองรับ เช่น เส้นทางจักรยาน ซึ่งเมื่อเลือกกำหนดโหมดดังกล่าวจะไม่เห็นการเปลี่ยนแปลงใดๆ จึงหันไปยกตัวอย่างจาก London แทนเพื่อให้ผู้อ่านได้เห็นความแตกต่างในการแสดงผลแต่ละแบบได้ชัดเจนขึ้น แต่เพื่อไม่ให้เป็นการน้อยเนื้อต่ำใจกัน ผู้เขียนก็ได้ลองเอาพิกัดของพื้นที่ในประเทศไทยมาลองทำดูให้ผู้อ่านได้เห็นแถมมาด้วยว่าพื้นที่ของเราจะเห็นเส้นทางเป็นยังไงในแต่ละแบบกันบ้าง ดังนี้ค่ะ
    ตัวอย่างการแสดงเส้นทางระหว่างสนามบินสุวรรณภูมิและเขตจตุจักร
    1) แบบ Transit mode

     

    จะเห็นได้ว่า เมื่อคลิกที่รูปสัญลักษณ์เครื่องหมายคำพูด จะแสดงรายละเอียดเกี่ยวกับข้อมูลการขนส่งสาธารณะนั้นๆ เช่น รถเมล์สายใด รถไฟฟ้า BTS สายใด เป็นต้น

    2) แบบ Walking Mode


    3) แบบ Driving Mode

              จากบทความ จะเห็นได้ว่านี่เป็นอีกหนึ่งตัวอย่างในการเพิ่มลูกเล่นให้กับการใช้งานแผนที่เท่านั้น โดยยังมีอีกหลายวิธีการรอให้เราศึกษาเพื่อนำมาประยุกต์ใช้และเพิ่มความสามารถให้กับการใช้งานแผนที่ในเว็บไซต์ของเรา ผู้เขียนหวังว่าบทความนี้จะเป็นประโยชน์กับผู้อ่านสามารถหยิบยกไปใช้ประโยชน์ได้ไม่มากก็น้อย หากมีข้อผิดพลาดประการใดผู้เขียนขออภัยไว้ ณ ที่นี้ด้วยนะคะ ขอบคุณค่ะ ^^


    แหล่งข้อมูลอ้างอิง :