javascript – 创建正确的导航路径

我必须为船只创建导航路径.所有的船都到达中心点并停在那里一段时间.
船舶坐标和中心点(MotherShip)来自数据库.

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

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

问题是有些船只从水中心点开始.他们应该在陆地上开始和结束.

Like here you can see one ship at the start of red line(land) and one at the start of green line (in water where center point is).

这是我用于初始化部分的谷歌地图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);
      }

animateCircle()函数：

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