如何在Google Map Api中绘制员工的RouteMap。从数据库获取坐标

Question

我正在研究CodeIgniter上的一个项目，该项目可跟踪员工在工作期间的位置。 他的座标每10秒就会从Android应用程式储存到资料库中。 但是当我绘制任何员工的路线图时，路线绘制不正确。 所有标记和停留位置均显示完美，但仅是路线图中的问题 Map Draw Routes Like This

Routes are not drawing Properly

Here is database

<script>
  $(document).ready(function() {
    $('#searchBtn').click(function(event) {

      var office_id = $("#office_id").val();
      var salesman_id = $("#salesman").val();
      var path_date = $("#path_date").val();

      $.ajax({
        type: 'POST',
        url: '<?php echo base_url() ?>salesman/get_salesman_path_by_id',
        data : {salesman_id:salesman_id, path_date:path_date},
        success:  function (response) {
        var result = response ;
          initMap3(result);
        }
      })
    });
  });
</script>

    <div id="menu3" class="tab-pane fade">
          <input type="hidden" value="0">
          <div class="row routeMap">
            <div class="col-xs-12 col-sm-12 col-md-2 div1" style="padding-right: 0px">
              <select id="office" class="form-control "  name="office_id" selected="selected" required="required">
              <option value="">Select Office</option>
              <?php  foreach ($office as $v){ ?>
                <option value="<?php echo $v["id"]?>"><?php echo $v["name"];?></option> <?php }  ?>
              </select>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-2 div2" style="padding-left: 0px;padding-right: 0px">
              <select id="salesman" class="form-control " name="salesman_id" selected="selected"  required="required">
                <option value="">Select Staff</option>
              </select>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-2 div3" style="padding-right: 0px;padding-left: 0px">
              <input type="date" class="form-control " name="path_date" id="path_date">
            </div>
            <div class="col-xs-12 col-sm-12 col-md-1 div4" style="padding-left: 0px;padding-right: 0px;">
              <input type="button" class="btn btn-success " value="Submit" id="searchBtn">
            </div>
          </div>
        <div id="map3"></div>
   </div>

function initMap3(data) {


  var map3 = new google.maps.Map(document.getElementById('map3'), {
      zoom: 7,
      center: new google.maps.LatLng(30.375321, 69.34511599999996),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

              var locations3 = JSON.parse(data);
              var clicked = false;

            var salesmanPath = [];
               $.each(locations3.salesman, function( index, value ) {
                  salesmanPath.push({
                      lat: parseFloat(value.latitude),
                      lng: parseFloat(value.longitude)
                  });
              });

            var markedAndStay= [];
                 $.each(locations3.markAndStay, function( index, value ) {
                    markedAndStay.push({
                        lat: parseFloat(value.latitude),
                        lng: parseFloat(value.longitude),
                        locImg: value.image,
                        locName: value.location_name,
                        fname: value.first_name,
                        stayTime: value.stay_duration,
                        isStay: value.is_mark,
                        isMark: value.is_mark
                    });
              });

                var flightPath = new google.maps.Polyline({
                  path: salesmanPath,
                  geodesic: true,
                  strokeColor: '#FF0000',
                  strokeOpacity: 1.0,
                  strokeWeight: 2
                });

                flightPath.setMap(map3);
                var infowindow = new google.maps.InfoWindow({});
                var marker, i;
                var stayLocations = markedAndStay;


                for (i = 0; i < stayLocations.length; i++)//this loop shows marked location and stay
                {
                                      if (stayLocations[i].isMark == 1) {
                                        marker = new google.maps.Marker({
                                          position: new google.maps.LatLng(stayLocations[i]),
                                          map: map3,
                                          icon: 'assets/Images/blue.png'
                                        }),

                                         google.maps.event.addListener(marker, 'mouseover', (function (marker, i) {
                                              return function () {
                                                if (!clicked) {

                                              infowindow.setContent('<div><img src="' + markedAndStay[i].locImg + '" width="60px" height="60px" /><br>' + '<strong>Name: </strong><span>' + stayLocations[i].fname + '</span><br>' + '<strong>Location: </strong>' + stayLocations[i].locName + '<br>'  + '<strong>' + stayLocations[i].stayTime +'</strong></div>' );
                                                infowindow.open(map3, this);
                                                }
                                              }
                                            })(marker, i)),

                                             google.maps.event.addListener(marker, 'click', (function(marker, i) {
                                             return function () {
                                              clicked = true;

                                              infowindow.setContent('<div><img src="' + markedAndStay[i].locImg + '" width="60px" height="60px" /><br>' + '<strong>Name: </strong><span>' + stayLocations[i].fname + '</span><br>' + '<strong>Location: </strong>' + stayLocations[i].locName + '<br>'  + '<strong>' + stayLocations[i].stayTime +'</strong></div>' );
                                                infowindow.open(map3, this);
                                                }
                                            })(marker, i)),


                                          marker.addListener('mouseout', function() {
                                            if (!clicked) {
                                                infowindow.close();
                                              }
                                           }),

                                          google.maps.event.addListener(infowindow,
                                              'closeclick',
                                              function() {
                                                clicked = false;
                                            })
                                      }else{

                                          marker = new google.maps.Marker({
                                          position: new google.maps.LatLng(stayLocations[i]),
                                          map: map3,
                                          icon: 'assets/Images/orange.png'
                                        }),

                                         google.maps.event.addListener(marker, 'mouseover', (function (marker, i) {
                                              return function () {
                                                if (!clicked) {
                                                infowindow.setContent( '<div><strong>Name: </strong><span>' + stayLocations[i].fname + '</span><br>' + '<strong>Location: </strong>' + stayLocations[i].locName + '<br>'  + '<strong>' + stayLocations[i].stayTime +'</strong></div>' );
                                                infowindow.open(map3, this);
                                                }
                                              }
                                            })(marker, i)),

                                             google.maps.event.addListener(marker, 'click', (function(marker, i) {
                                             return function () {
                                              clicked = true;

                                              infowindow.setContent('<div><strong>Name: </strong><span>' + stayLocations[i].fname + '</span><br>' + '<strong>Location: </strong>' + stayLocations[i].locName + '<br>'  + '<strong>' + stayLocations[i].stayTime +'</strong></div>' );
                                                infowindow.open(map3, this);
                                                }
                                            })(marker, i)),


                                          marker.addListener('mouseout', function() {
                                            if (!clicked) {
                                                infowindow.close();
                                              }
                                           }),

                                          google.maps.event.addListener(infowindow,
                                              'closeclick',
                                              function() {
                                                clicked = false;
                                            })
                                      }
                }

   }