Я создаю проект для своей стажировки, и у меня есть несколько самолетов, движущихся по полилинии на картах Google. Я хочу создать свой проект на простом пути, потому что у меня почти нет опыта, и, возможно, я делаю это неправильно, и поэтому я прошу помощи. You can see what i'm talking about hereКак установить скорость перемещения символа на полилинии
У меня есть 4 самолета в данный момент, поэтому мне пришлось создать одну функцию для каждого из них, потому что, если я не доплачу до Испании, то прибудет в то же время, что и самолет в Бразилию, и они оба взлетели на в то же время.
Это то, что у меня есть в данный момент, поэтому я создал символ пути к костюму, а затем полилинии.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: 12.1336018, lng: -15.1832411},
mapTypeId: 'terrain'
});
//Define the custom symbols. All symbols are defined via SVG path notation.
// They have varying stroke color, fill color, stroke weight,
// opacity and rotation properties.
var planeSymbol = {path: 'M 8.1326447,0.80527736 C 8.5471666,0.063577346 9.742752,0.030177346 10.052431,0.82497736 C 10.093464,3.0114774 10.134497,5.1980774 10.17553,7.3845774 C 12.760407,8.9653774 15.345284,10.546179 17.930161,12.127079 C 17.930161,12.881779 17.930161,13.636479 17.930161,14.391179 C 15.373077,13.579479 12.815993,12.767779 10.258908,11.956179 C 10.27281,13.280479 10.286713,14.604879 10.300615,15.929279 C 10.8565,16.555879 11.412385,17.182479 11.96827,17.809079 C 12.25527,18.269479 12.437605,19.641079 11.59784,19.085079 C 10.804104,18.802179 10.010367,18.519179 9.21663,18.236279 C 8.3133108,18.620779 7.4099916,19.005279 6.5066724,19.389779 C 6.3952441,18.705879 6.2272708,17.857479 6.8519879,17.359679 C 7.2927717,16.882879 7.7335555,16.406079 8.1743393,15.929279 C 8.1465467,14.604879 8.1187541,13.280479 8.0909615,11.956179 C 5.5894706,12.824879 3.0879797,13.693479 0.58648883,14.562179 C 0.54479393,13.821679 0.50309893,13.081079 0.46140403,12.340579 C 3.0184842,10.717079 5.5755645,9.0935778 8.1326447,7.4700774 C 8.1326447,5.2484774 8.1326447,3.0268774 8.1326447,0.80527736 z',
scale: 1,
strokeOpacity: 1,
strokecolor: 'black',
strokeWeight: 1,
anchor: new google.maps.Point(9, 9)
};
var GRU = new google.maps.Polyline({
path: [{lat: 38.771183, lng: -9.131135}, {lat: -23.6276104, lng: -46.6568016}], //Lis - GRU
strokeOpacity: 0.1,
icons: [{
icon: planeSymbol,
offset: '0'
}],
map: map});
animatePlane(GRU);
var LAD = new google.maps.Polyline({
path: [{lat: 38.771183, lng: -9.131135}, {lat: -8.8648774, lng: 13.2249472}], //Lis - LAD
strokeOpacity: 0.1,
icons: [{
icon: planeSymbol,
offset: '0'
}],
map: map});
animatePlane1(LAD);
var MIA = new google.maps.Polyline({
path: [{lat: 38.771183, lng: -9.131135}, {lat: 25.8027373, lng: -80.2892127}], //Lis - MIA
strokeOpacity: 0.1,
icons: [{
icon: planeSymbol,
offset: '0'
}],
map: map});
animatePlane2(MIA);
var MAD = new google.maps.Polyline({
path: [{lat: 38.771183, lng: -9.131135}, {lat: 40.4690627, lng: -3.5599042}], //Lis - MAD
strokeOpacity: 0.1,
icons: [{
icon: planeSymbol,
offset: '0'
}],
map: map});
animatePlane3(MAD);
function animatePlane(line) {
var count = 0;
var listener = window.setInterval(function() {
count = (count + 1) % 200;
var icons = line.get('icons');
icons[0].offset = (count/2) + '%';
line.set('icons', icons);
if (count >= 199)
clearInterval(listener);
}, 2000);
}
function animatePlane1(line) {
var count = 0;
var listener = window.setInterval(function() {
count = (count + 1) % 200;
var icons = line.get('icons');
icons[0].offset = (count/2) + '%';
line.set('icons', icons);
if (count >= 199)
clearInterval(listener);
}, 2000);
}
function animatePlane2(line) {
var count = 0;
var listener = window.setInterval(function() {
count = (count + 1) % 200;
var icons = line.get('icons');
icons[0].offset = (count/2) + '%';
line.set('icons', icons);
if (count >= 199)
clearInterval(listener);
}, 2000);
}
function animatePlane3(line) {
var count = 0;
var listener = window.setInterval(function() {
count = (count + 1) % 200;
var icons = line.get('icons');
icons[0].offset = (count/2) + '%';
line.set('icons', icons);
if (count >= 199)
clearInterval(listener);
}, 2000);
}
}#map {
width: 900px;
height: 684px;
}<html>
<body>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCUYsLGs_ek6Ids4TN1ZZeJvv6X-r4j5N4&callback=initMap"></script>
</body>
</html>Так что это всего лишь пример, но мой реальный вопрос я могу смоделировать реальную скорость самолета или может я установить, сколько времени (в часах), он принимает к плоскости достичь конца полилинии?
Pls не сообщают о моем вопросе, просто помогите мне учиться! если я не в теме, скажите мне, как улучшить свои вопросы: D
увеличить установленный интервал времени от 20 до 2000 –
ТНХ для вашего ответа: D, я сделал, и это держит происходит, что самолет в Мадрид прибывает в то же время, чем другие, мне пришлось установить счетчик +0.1 во всех из них или самолет будет двигаться очень быстро, и он не является гладким, как это было с интервалом времени 20 –
u может использовать код переполнения стека для кода .. так что я можно проверить –