创建合适的导航路径

我必须为船只创建一个导航路径。所有的船都来到一个中心点，在那里停一会儿。船的坐标和中心点(母舰)来自数据库。

选择数据的代码。中心点是静态的

<?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);
?>

问题是有一些船是从水中的中心点出发的。他们应该从陆地开始和结束。

就像这里，你可以看到一艘船在红线的起点(陆地)，一艘在绿线的起点(在中心点所在的水中)。

这是我的google maps JavaScript部分的初始化部分。

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][1], locMatrix[i][2]),
                  new google.maps.LatLng(17.8674, 66.543),
                  new google.maps.LatLng(locMatrix[i][3], locMatrix[i][4]));
      }
        var Colors = [
        "#FF0000", 
        "#00FF00", 
        "#0000FF", 
        "#FFFFFF", 
        "#000000", 
        "#FFFF00", 
        "#00FFFF", 
        "#FF00FF"
        ];

完整的代码在JSFiddle.

你也可以访问我的github repo获取整个代码。

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

// Create the polyline and add the symbol to it via the 'icons' property.
        for(var i=0; i <=nrows; i++)
        {
          var line = new google.maps.Polyline({
            path: [{lat: locMatrix[i][1], lng: locMatrix[i][2]},
            {lat: 17.8674, lng: 66.543},
            {lat: locMatrix[i][3], lng: locMatrix[i][4]}],
            icons: [{
              icon: lineSymbol,
              offset: '100%'
          }],
          strokeColor: '#000000',
          strokeOpacity: 1.0,
          map: map
      });
          animateCircle(line);
      }

function animateCircle(line) {
          var count = 0;
          window.setInterval(function() {
            count = (count+0.5) % 200;
            var icons = line.get('icons');
            icons[0].offset = (count / 2) + '%';
            line.set('icons', icons);
        }, 20);
      }