【发布时间】：2020-10-17 05:01:40
【问题描述】：
我一直在尝试旋转 Google Maps API SVG 飞机符号，以便在每次符号移动时显示飞机的正确航向。它最初加载显示正确的标题 - 我似乎无法弄清楚如何将其更新为新标题。我已经花了 2 天的时间尝试并且非常失败。我以为我可以通过添加 rotatation: getTrueHeading 来简单地更改它，但没有这样的运气。
我可以让它紧密地做我想要的唯一方法是将planeSymbol实例和标记实例添加到
setInterval(function() {}, 3000);
功能朝向底部，但这（显然）复制了飞机图标并且看起来非常低效。
我很欣赏下面的代码不是很好，所以请原谅它的质量 - 仍然有很多工作正在进行中，我对 javascript 也很陌生。
如果有人可以帮助我将不胜感激。
function initMap() {
var getLatEl = document.getElementById('latitude');
getLat = parseFloat(getLatEl.innerHTML);
var getLongEl = document.getElementById('longitude');
getLong = parseFloat(getLongEl.innerHTML);
var gettrueHeadingEl = document.getElementById('trueHeading');
getTrueHeading = parseFloat(gettrueHeadingEl.innerHTML);
if (isNaN(getLat) == true && isNaN(getLong) == true) {
// Show default location
var usersLocation = {lat: 33.949484, lng: -118.430566};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: usersLocation,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var image = 'assets/images/icons/aircraft_marker_map_none_16x16.png';
}else if (isNaN(getLat) == false && isNaN(getLong) == false) {
// Show flight sim location
var usersLocation = {lat: getLat, lng: getLong};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: usersLocation,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var image = 'assets/images/icons/aircraft_marker_map_16x16.png';
}
var planeSymbol = {
path: 'M362.985,430.724l-10.248,51.234l62.332,57.969l-3.293,26.145 l-71.345-23.599l-2.001,13.069l-2.057-13.529l-71.278,22.928l-5.762-23.984l64.097-59.271l-8.913-51.359l0.858-114.43 l-21.945-11.338l-189.358,88.76l-1.18-32.262l213.344-180.08l0.875-107.436l7.973-32.005l7.642-12.054l7.377-3.958l9.238,3.65 l6.367,14.925l7.369,30.363v106.375l211.592,182.082l-1.496,32.247l-188.479-90.61l-21.616,10.087l-0.094,115.684',
scale: 0.0333,
strokeOpacity: 1,
color: 'black',
strokeWeight: 1,
rotation: getTrueHeading
};
var marker = new google.maps.Marker({
id: "player",
position: usersLocation,
map: map,
title: 'Username',
icon: planeSymbol
});
//
// Move players aircraft
setInterval(function() {
var getLatEl = document.getElementById('latitude');
getLat = parseFloat(getLatEl.innerHTML);
var getLongEl = document.getElementById('longitude');
getLong = parseFloat(getLongEl.innerHTML);
var gettrueHeadingEl = document.getElementById('trueHeading');
getTrueHeading = parseFloat(gettrueHeadingEl.innerHTML);
var planeSymbol = {
path: 'M362.985,430.724l-10.248,51.234l62.332,57.969l-3.293,26.145 l-71.345-23.599l-2.001,13.069l-2.057-13.529l-71.278,22.928l-5.762-23.984l64.097-59.271l-8.913-51.359l0.858-114.43 l-21.945-11.338l-189.358,88.76l-1.18-32.262l213.344-180.08l0.875-107.436l7.973-32.005l7.642-12.054l7.377-3.958l9.238,3.65 l6.367,14.925l7.369,30.363v106.375l211.592,182.082l-1.496,32.247l-188.479-90.61l-21.616,10.087l-0.094,115.684',
scale: 0.0333,
strokeOpacity: 1,
color: 'black',
strokeWeight: 1,
rotation: getTrueHeading
};
var marker = new google.maps.Marker({
position: usersLocation,
map: map,
title: 'Username',
icon: planeSymbol
});
marker.setPosition( new google.maps.LatLng( getLat, getLong ) );
map.panTo( new google.maps.LatLng( getLat, getLong ) );
}, 3000);
}
marker.setMap( map );
moveAircraft( map, marker );
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=APIKEYREMOVED&callback=initMap" async defer>
</script>
<!--/Google Map API -->
<!-- Move Aircraft to Flight Sim Location -->
<script>
function moveAircraft( map, marker ) {
var getLatEl = document.getElementById('latitude');
getLat = parseFloat(getLatEl.innerHTML);
var getLongEl = document.getElementById('longitude');
getLong = parseFloat(getLongEl.innerHTML);
marker.setPosition( new google.maps.LatLng( getLat, getLong ) );
map.panTo( new google.maps.LatLng( getLat, getLong ) );
};
</script>【问题讨论】：
-
可能的相关问题（有一个沿折线动画的 SVG 飞机符号）：Create custom symbol on polyline using SVG path
标签： javascript google-maps-api-3 svg rotation