创建正确的导航路径

Question

我必须为船只创建一个导航路径。所有的船都到达一个中心点并停了一段时间。船只的坐标和中心点（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);
?>

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

像这里一样，您可以看到一艘船在红线（陆地）的起点，而另一艘船在绿线的起点（在中心点所在的水中）。

这是我的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存储库以获取完整代码。

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

Answer 1

好吧，我找到了一个不同的解决方案，这对我有部分帮助。

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