停止导航路径上的符号

Question

在这个项目中，研究项目船的导航路径有符号。

船只沿着导航路线行进。起点和终点来自数据库。 用于初始化起点和终点的代码。

<?php
    $sqlqry = "SELECT * FROM ship WHERE id=" . $id . " AND start_date BETWEEN '" . $s_date . "' AND '" . $e_date . "'";
    $result = mysqli_query($bd, $sqlqry);
    $locations = array();
    $counter=0;
    while($row = mysqli_fetch_array($result)) {
        array_push($locations, $row);
    }
    $nrows = mysqli_num_rows($result);
?>

船舶应停在中间点（母船），这是静止的。 问题是船只连续不停在中间点。

初始化中间点或母船的代码。

<?php
    $result = mysqli_query($bd,"SELECT * FROM mother_ship WHERE id=".$id);
    $m_ship = array();
    while($row = mysqli_fetch_array($result)) {
        array_push($m_ship, $row);
    }
    $m_ship_rows = mysqli_num_rows($result);
?>

这是我在JavaScript中使用Google Maps API导航船只的代码段。

//Initialization Of Data From DB
    var nrows = <?php echo json_encode($nrows,JSON_NUMERIC_CHECK);?>;
    var locMatrix = <?php echo json_encode($locations,JSON_NUMERIC_CHECK);?>;
    var m_ship_rows = <?php echo json_encode($m_ship_rows,JSON_NUMERIC_CHECK);?>;
    var m_ship = <?php echo json_encode($m_ship,JSON_NUMERIC_CHECK);?>;

      var line;
      var line1;
      var lineArray = [];
      var lineArray1 = [];
      var DrivePath = [];
      // This example adds an animated symbol to a polyline.

      function initMap() {

        var intervalForAnimation;
        var count = 0;
        var n = 2;

        for(var i=0;i<=nrows-1;i++)
        {
        console.log(DrivePath[i]);
        DrivePath.push(new google.maps.LatLng(locMatrix[i][0], locMatrix[i][1]),
                  new google.maps.LatLng(17.8674, 66.543),
                  new google.maps.LatLng(locMatrix[i][2], locMatrix[i][3]));
      }
        var Colors = [
        "#FF0000", 
        "#00FF00", 
        "#0000FF", 
        "#FFFFFF", 
        "#000000", 
        "#FFFF00", 
        "#00FFFF", 
        "#FF00FF"
        ];


//Code for navigation path creation.
        for (var i = 0; i < DrivePath.length-1; i++) {
              var line = new google.maps.Polyline({
              path: [DrivePath[i], DrivePath[i+1]],
              icons: [
                {
                  icon: symbolShape,
                  offset: '0%'
                }
              ],
              strokeColor: Colors[i],
              strokeOpacity: 0.0,
              strokeWeight: 2,
              map: map
            });
             lineArray[i] = line;
            }

        for (var i = 0; i < DrivePath.length-1; i++) {
            line1 = new google.maps.Polyline({
              path: [DrivePath[i], DrivePath[i+1]],
              icons: [
                {
                  icon: symbolSource,
                  offset: '0%'
                }, {
                  icon: symbolDestination,
                  offset: '100%'
                }
              ],
              strokeColor: Colors[i],
              strokeOpacity: 1.0,
              strokeWeight: 2,
              map: map
            });
            lineArray1[i] = line1;
          }

            console.log(lineArray.length);
            console.log(lineArray1.length);

          //Map boundaries
          var bounds = new google.maps.LatLngBounds();
            for (var i = 0; i < line.getPath().getLength(); i++) {
              bounds.extend(line.getPath().getAt(i));
            }
          map.fitBounds(bounds);

      // Use the DOM setInterval() function to change the offset of the symbol
      // at fixed intervals.
      function animateCircle(count) {
        for(var i = 0; i < lineArray.length; i++){
          line10 = lineArray[i];
          var icons = line10.get('icons');
          icons[0].offset = (count / 2) + '%';
          line10.set('icons', icons);
          $("#slider").slider("value", count);
          }
          if (count >= 199){ 
            clearInterval(intervalForAnimation);
            clearTheLines();
            motherShipLayer.setMap(null);
          };    
      }

        function clearTheLines(){
            for(var i = 0; i < lineArray1.length; i++){
              line11 = lineArray1[i];
              line11.setMap(null);
            }
        }

另外，我想请注意，我有一个与导航路径关联的滑块，有助于播放暂停和重置导航路径。

As you can see here, the mother ship is in the centre and there are two ships. The problem is that the ship just comes and goes.

Google Maps JavaScript代码位于JSFiddle

如果您有兴趣，该项目位于

http://github.com/Tejas-Nanaware/ship-scheduling-and-animation-tool