我必须为船只创建导航路径。所有的船只都来到一个中心点并在那里停了一会儿。 船只坐标和中心点(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
最佳答案
好吧,我找到了一个不同的解决方案,这在一定程度上帮助了我。
// 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);
}
关于javascript - 创建正确的导航路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39506316/