Page 1 of 1

วิธีการเขียนโค้ดคำนวนหาระยะทาง พิกัด 2 จุด

Posted: 30/05/2019 11:37 pm
by Kanyarat Kanthawong
พอดีอยากจะเขียนโค้ด คำนวณหาระยะห่างจากจุด 2 จุด แต่ไม่รู้จะเขียนยังไงดี พอมีวิธีไหมค่ะ
โค้ดแสดง พิกัดค่ะ ไม่รุ้จะแทรกหรือเขียนตรงไหนดี

Code: Select all

      
   <meta charset="utf-8">
   <select id="selPlace">
      <option>กรุณาเลือกปลายทาง</option>
   </select>
   ระยะห่างระหว่างจุดตรวจ <input type="text" >
   <div id="map"></div>
   <style>
      #map{
         width: 100%;
         height: 90%;
      }
      @media only screen and (max-width: 768px) {
         #map{
            width: 100%;
            height: 90%;
            border: 2px solid black;
         }
      }
   </style>
   <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAjm5miI0bV1CT1w1XpMEA1Jv5MMn8d8H8">
    </script>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
       var map;
       var bounds  = new google.maps.LatLngBounds();
       var infowindow = new google.maps.InfoWindow();
       var marker, i;
       var markers = [];
       var myLocation;
       
         
       function initMap(latitude,longitude) {
          map = new google.maps.Map(document.getElementById('map'), {zoom: 12, center: {lat: latitude, lng: longitude}}); //สร้างแผนที่
          var directionsService = new google.maps.DirectionsService();
          var directionsDisplay = new google.maps.DirectionsRenderer({
              map: map,
              suppressMarkers: true
           });
          myLocation = new google.maps.LatLng(18.4181701, 98.6773163);
          
          // Create My location
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(18.4181701, 98.6773163),//ตำแหน่ง สภ.จอมทอง
            icon:"./scr/PoliceBadge.png",
            map: map
         });
         
         google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent("Your Location");
                infowindow.open(map, marker);
                infoWindow.open(map);
             }
         })(marker, i));
         loc = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
         bounds.extend(loc);
          // Create Marker Place
          createMarker();
          map.fitBounds(bounds);

          var onChangeHandler = function() {
             calculateAndDisplayRoute(
              directionsDisplay, directionsService);
           };
           document.getElementById('selPlace').addEventListener('change', onChangeHandler);
        }

        function getLocation() {
         if (navigator.geolocation) {
             navigator.geolocation.getCurrentPosition(showPosition);
           } else {
             x.innerHTML = "Geolocation is not supported by this browser.";
           }
         }

      function showPosition(position) {
           initMap(position.coords.latitude,position.coords.longitude);
      }

      function createMarker(){
         $.post('selectPlace.php',{},function(data){
            var jPlace = JSON.parse(data);
            for (i = 0; i < jPlace.length; i++) { 
                  marker = new google.maps.Marker({
                    position: new google.maps.LatLng(jPlace[i].latitude, jPlace[i].longtitude),
                    map: map
                  });
                  $('#selPlace').append('<option value="'+i+'">'+jPlace[i].name+'</option>');
                 google.maps.event.addListener(marker, 'click', (function(marker, i) {
                 return function() {
                   infowindow.setContent(jPlace[i].name);
                   infowindow.open(map, marker);
                    }
                  })(marker, i));
                 loc = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
               bounds.extend(loc);
               markers.push({lat:marker.position.lat(), lng:marker.position.lng()});
             }
             map.fitBounds(bounds);
         });
         
      }

      function calculateAndDisplayRoute(directionsDisplay, directionsService){
         var target = new google.maps.LatLng(markers[$('#selPlace').val()].lat, markers[$('#selPlace').val()].lng);
         directionsService.route({
             origin: myLocation,//จุดเริ่มต้น
             destination: target,//ปลายทาง
               travelMode: 'DRIVING' //สำรวจเส้นทางสายหลัก
           }, function(response, status) {
             if (status === 'OK') {
               directionsDisplay.setDirections(response); //แสดงเส้นทาง
             } else {
               window.alert('Directions request failed due to ' + status);
             }
           });
      }
      getLocation();
    </script>