ทำยังให้ google map api สามารถหาเส้นทางได้มากกว่า10เส้นทางคะ จะเก็บระยะทางอะคะ จาก a-->b จาก b-->c จะเก็บเส้นทา

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ทำยังให้ google map api สามารถหาเส้นทางได้มากกว่า10เส้นทางคะ จะเก็บระยะทางอะคะ จาก a-->b จาก b-->c จะเก็บเส้นทา

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Google Map</title>
    <style>
      #right-panel {
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }

      #right-panel select, #right-panel input {
        font-size: 15px;
      }

      #right-panel select {
        width: 100%;
      }

      #right-panel i {
        font-size: 12px;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
        float: left;
        width: 70%;
        height: 100%;
      }
      #right-panel {
        margin: 20px;
        border-width: 2px;
        width: 20%;
        height: 400px;
        float: left;
        text-align: left;
        padding-top: 0;
      }
      #directions-panel {
        margin-top: 10px;
        background-color: #FFEE77;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="right-panel">
    <div>
       
    <b>Start:</b>
    <select id="start">
      <option value="13.745787, 100.392734">กทม.</option>
      <option value="14.089116, 100.633531">ปทุมธนี</option>
      <option value="14.452263, 99.511403">กาญจนบุรี</option>
      <option value="14.346021, 100.365672">อยุธยา</option>
    </select>
    <br>
    <b>Waypoints:</b> <br>
    <i>(Ctrl+Click or Cmd+Click for multiple selection)</i> <br>
    <select multiple id="waypoints">
      <option value="13.012635, 99.660293">เพชรบุรี</option>
      <option value="16.006953, 101.972537">ชัยภูมิ</option>
      <option value="12.724106, 101.865950">จันทบุรี</option>
      <option value="16.968416, 99.372920">ตาก</option>
      <option value="13.904587, 100.044862">นครปฐม</option>
      <option value="14.737468, 102.819529">บุรีรัมย์</option>
      <option value="13.657798, 100.154159">สมุทรสาคร</option>
      <option value="13.392156, 100.008796">สมุทรสงคราม</option>
      <option value="13.555882, 99.968298">ราชบุรี</option>
      <option value="14.924741, 99.573366">สุพรรณบุรี</option>
      <option value="14.773374, 100.314927">อ่างทอง</option>
      <option value="15.781975, 100.286628">นครสวรรค์</option>
    </select>
    <br>
    <b>End:</b>
    <select id="end">
      <option value="13.745787, 100.392734">กทม.</option>
      <option value="14.089116, 100.633531">ปทุมธนี</option>
      <option value="14.452263, 99.511403">กาญจนบุรี</option>
      <option value="14.346021, 100.365672">อยุธยา</option>
    </select>
    <br>
      <input type="submit" id="submit">
    </div>
    <div id="directions-panel"></div>
    </div>
    <script>
var directionsService;
var directionsDisplay;
var map;
 
      function initMap() {
        
                                
         directionsService = new google.maps.DirectionsService;
         directionsDisplay = new google.maps.DirectionsRenderer;
         map = new google.maps.Map(document.getElementById('map'), {
          zoom: 6,
          center: {lat: 13.7246005, lng: 100.6331108}
        });
        directionsDisplay.setMap(map);
       

        document.getElementById('submit').addEventListener('click', function() {
          calculateAndDisplayRoute(directionsService, directionsDisplay);
        });
      }

      function calculateAndDisplayRoute(directionsService, directionsDisplay) {
        var waypts = [];
       
        var checkboxArray = document.getElementById('waypoints');
        for (var i = 0; i < checkboxArray.length; i++) {
          if (checkboxArray.options[i].selected) {
            waypts.push({
              location: checkboxArray[i].value,
              stopover: true
            });
          }
        }

        directionsService.route({
          origin: document.getElementById('start').value,
          destination: document.getElementById('end').value,
          waypoints: waypts,
          optimizeWaypoints: true,
          travelMode: 'DRIVING'
        }, function(response, status) {
          if (status === 'OK') {
            
            directionsDisplay.setDirections(response);
            var longway=[];
            var sumlongway=0;    
              var slongway=[];
            var route = response.routes[0];
            var summaryPanel = document.getElementById('directions-panel');
            summaryPanel.innerHTML = '';
            // For each route, display summary information.
            for (var i = 0; i < route.legs.length; i++) {
              var routeSegment = i + 1;
              summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment +
                  '</b><br>';
              summaryPanel.innerHTML += route.legs[i].start_address + ' To =>';
              summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
              summaryPanel.innerHTML += route.legs[i].distance.text + '<br>';
              longway[i]=  (route.legs[i].distance.value/1000).toFixed(3);
              slongway[i]=parseFloat(longway[i]);
              sumlongway=sumlongway + slongway[i];
              
            }
             summaryPanel.innerHTML = 'ระยะทางรวม : ' +sumlongway.toFixed(3) + 'Km';
              //window.alert(sumlongway);
             
             
              
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDK_U2mdsxXf-l0QWPNv4IGyK6EMKqxBHk&callback=initMap">
    </script>
  </body>
</html>

Am 14-09-2016 17:10:23

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

ลองประยุกต์จากนเื้อหานี้เป็นแนวทาง

สร้างเส้นทาง จากการ คลิกกำหนด waypoints จุดผ่านเส้นทาง ใน google map

https://www.ninenik.com/content.php?arti_id=359 via @ninenik

ninenik 14-09-2016

ความคิดเห็นที่ 2

ขอบคุณคะสำหรับแนวทาง คือสงสับอีกเรื่อวคะ ตรงการทำงานของ for บันทัดที่ 146 อะคะ เราสามารถสร้างตัวแปรมารับแล้วเก็บค่าได้ไหมคะ ขอบคุณคะ
@ Ninenik

Am 14-09-2016 17:36

ความคิดเห็นที่ 3

สามารถสร้างตัวแปรมารับค่าได้

ninenik 14-09-2016

ความคิดเห็นที่ 4

ช่วย guide หน่อยได้ไหมคะ ขอบคุนคะที่ตอบหนู @ Ninenik

Am 14-09-2016 23:10

ความคิดเห็นที่ 5

ถ้าเราสร้างตัวแปรมาเก็บค่าตรง for บรรทัด 146 ได้ เราก็จะสามารถเก็บค่าระยะทางของแต่ละเส้นทางได้ช่ายไหมคะ แล้วgoogle map ก็จะสามารถสร้าง waypoint ได้มากกว่า 10เส้นทางใช่ไหมคะ ขอบคุณคะ คอืหนูไม่รู้ว่าจะทำไงต่อจริงๆ @ Ninenik

Am 14-09-2016 23:16

ความคิดเห็นที่ 6

Waypoint ได้สูงสุดแค่ 9 ส่วนตัวแปร ในโค้ดก็มีอยู่แล้ว ขึ้นกับว่าจะเอาไปใช้ยังไง

ninenik 15-09-2016

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน