我必须为船只创建导航路径.所有的船都到达中心点并停在那里一段时间.
船舶坐标和中心点(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);
?>
问题是有些船只从水中心点开始.他们应该在陆地上开始和结束.
这是我用于初始化部分的谷歌地图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);
}